需求:在页面中,不管位于何处,点击按钮页面滚动到对应的标题位置。
最简单有效的方式(直接复制改数据就行)
使用 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.设置滚动距离,时长