上海市治疗白癜风最好的医院 https://m-mip.39.net/nk/mipso_4790070.html我的这个很长，希望你们喜欢！
首先，我们看看要实现的效果是怎样的。
如果没看懂，那么，我来描述一下。
左侧是一个新闻列表页；右侧是新闻内容页，包含了列表中所有的新闻。
当点击左侧新闻列表页中的新闻标题时，页面跳转到新闻内容页，并将新闻内容页的内容进行滚动，将与被点击标题一致的新闻滚动到浏览器窗口的顶部。
因为涉及到跨页面的交互，那么，这个交互一定需要使用全局变量。
这里，我给大家讲两种实现方法的实现思路。
第一种：在新闻列表页点击新闻标题时，在全局变量中保存一个特定的值（例如新闻顺序编号），当打开新闻内容页时，对全局变量中的新闻编号进行判断，以便滚动到不同的新闻位置。例如：如果全局变量中保存的值为3，就让页面滚动到第3条新闻标题的位置。
第二种：在新闻列表页点击新闻标题时，在全局变量中保存新闻内容页中相同新闻标题的y轴坐标，当打开新闻内容页时，将一个用于定位的元件（例如：热区元件）移动到全局变量中所保存的y轴坐标位置上，最后滚动页面到定位元件的位置上。例如：如果第5条新闻所在的y轴位置是，就先将定位元件移动到这个位置，然后，让页面滚动到这个元件所在的位置。
实际上，还有另外一种方法结合了上面两种思路以及函数，但是比较复杂，不建议使用。如果对函数有兴趣的同学可以参考本篇教程附件资源中的rp源文件。
好了，完成了思路分析，接下来我们就按这两种思路实现这个交互。
注意：本案例预览时浏览器窗口高度尽量调小，也就是保证浏览器窗口能够出现滚动条，以保证页面内容可以滚动（如果没有滚动条还滚个屁啊！）。
一、第一种思路的实现
1、首先，准备好新闻列表中的所有元件，然后逐一为每一个标题添加的交互。
交互的动作有两个。
一个动作是为新闻的顺序编号。这里我们需要在设置动作时创建一个全局变量，命名为“anchor”（蓝色线段部分的操作）；然后，勾选这个全局变量，将它的值设置为一个顺序编号的数字。（此处以第一个新闻标题为例）
另外一个动作是打开链接，页面选择新闻内容页。
每一个新闻标题都添加以上两个交互动作，例如第二个新闻标题的动作与第一个新闻标题的动作，只是设置变量值时的数字不同。
2、在新闻内容页的，我们添加多个用例。每个用例都需要添加条件判断全局变量“anchor”中存入的数值，并通过的动作滚动页面内容。
注意：新闻内容页的标题元件都需要命名（title01~title08）。
添加条件（以第一个用例为例）：
当符合以上条件时，我们就可以设置动作“Title01”。
因为有多个标题，所以我们需要添加多个用例，每个用例都重复以上步骤。
好长是吧？吓到了是吧？太长也会不舒服是吧？
没关系，我们采用第二种方法会简单的多！
二、第二种思路实现
这一种实现方式，需要在新闻列表页点击标题时，将的值设置为新闻内容页相同新闻标题的y轴坐标。
以第3条新闻标题为例。
把每一条新闻标题交互中的动作逐一修改。
然后，打开新闻内容页，在页面中放入一个热区元件，位置随意摆放。
接下来，为这个热区元件添加两个动作。
第一个动作，热区元件指定的位置，这个位置的y轴坐标为全局变量“anchor”中保存的数值。
第二个动作，“当前元件”。
这两步的动作，实际上就是让热区元件移动到和目标新闻标题一样的位置，并以这个热区元件为定位元件滚动页面内容。
通过以上操作，就完成了这个案例的交互效果。
是不是比长的还要爽呢？
源文件下载：-原文底部预览时标签不可点收录于话题#个上一篇下一篇
