赞
踩
需求:在页面中,不管位于何处,点击按钮页面滚动到对应的标题位置。
最简单有效的方式(直接复制改数据就行)
使用 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.设置滚动距离,时长
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。