uni-app 锚点跳转
效果图实现原理通过 uni.createSelectorQuery 获取dom节点距离顶部的距离再通过uni.pageScrollTo 滑动页面HTML//NAV部分<view class="" v-for="(item,index) in 数组" :key="index" @click="point(index)"><text>{{item.name}}</text
·
效果图
实现原理
通过 uni.createSelectorQuery 获取dom节点距离顶部的距离 再通过uni.pageScrollTo 滑动页面
HTML
//NAV部分
<view class="" v-for="(item,index) in 数组" :key="index" @click="point(index)">
<text>{{item.name}}</text>
</view>
// 内容部分
<view class="newShopCon">
<view :class=" 'tab_item'+index " v-for="(item,index) in 数组" :key="index" >
<view>这里是内容</view>
</view>
</view>
JS
methods:{
point(index){ //锚点滑动
//要跳转的目标位置的节点
uni.createSelectorQuery().select(".tab_item" + index).boundingClientRect(data=>{
//最外层盒子的节点
uni.createSelectorQuery().select(".newShopCon").boundingClientRect(res=>{
uni.pageScrollTo({
duration: 100,//过渡时间
scrollTop:data.top - res.top ,//到达距离顶部的top值
})
}).exec()
}).exec();
},
//如果想要获得实时滑动的位置 根据滑动位置改变NAV当前选中高亮
onPageScroll(e) {
//e.scrollTop 是当前页面滑动距离
},
}
更多推荐
已为社区贡献5条内容
所有评论(0)