溧阳网站建设报价佛山网络公司 乐云seo

需求：在页面中，不管位于何处，点击按钮页面滚动到对应的标题位置。

最简单有效的方式（直接复制改数据就行）

使用  scroll-view 标签的属性：scroll-top(距离值 num) 或 scroll-into-view(子元素的id,不能以数字开头 string);

<scroll-view class="scroller" :scroll-into-view="toView" scroll-y="true" scroll-with-animation="true">你渲染的内容
</scroll-view>

点击事件(位置随便写，根据页面需求)

<p v-for="(item,index) in gameList[current-1].list" :key="index" @tap="filterList(item.name)">{{item.name}}
</p>

需要滚动到的地方（使用动态id）

<p :id="item.name">{{item.name}}</p>

事件

filterList(id) {uni.createSelectorQuery().select('#' + id).boundingClientRect(function(rect){// 使用scrollIntoView方法滚动到目标元素uni.pageScrollTo({scrollTop: rect.top - 70,duration: 300})}).exec();},

 总体思路：

1.使用scroll-view 标签，并配置；

2.点击事件获取想要的id；

3.设置滚动距离，时长