uni-app 实现锚点跳转方法
核心代码://从当前位置到达目标位置uni.createSelectorQuery().select('.comment-content').boundingClientRect(data=>{//目标位置的节点:类或者iduni.createSelectorQuery().select(".arc-content").boundingClientRect(res=>{//最外层盒子的
·
将uniapp的uni.createSelectorQuery()方法与uni.pageScrollTo(OBJECT)方法结合使用
更详细用法见官方文档:
uni.createSelectorQuery()方法: https://uniapp.dcloud.io/api/ui/nodes-info?id=createselectorquery
uni.pageScrollTo(OBJECT)方法: https://uniapp.dcloud.io/api/ui/scroll?id=pagescrollto
核心代码:
//从当前位置到达目标位置
uni.createSelectorQuery().select('.comment-content').boundingClientRect(data => { //目标位置的节点:类或者id
uni.createSelectorQuery().select(".arc-content").boundingClientRect(res => { //最外层盒子的节点:类或者id
uni.pageScrollTo({
duration: 100, //过渡时间
scrollTop: data.top - res.top, //到达距离顶部的top值
})
}).exec()
}).exec();
示例: (上面的滚动条是uview插件)
<template>
<view>
<view class="arc-content">
<!-- 插件 -->
<u-tabs :list="list" :is-scroll="true" bar-width="120" active-color="#ff5959" :current="current" @change="change"></u-tabs>
<view class="" style="height: 100upx;"></view>
<!-- 内容 -->
<view class="comment-content" style="margin-top:16upx;background: #fff;" v-for="(item,index) in list" :key="index" @click="tapwhole">
<view class="titles" :class="item.eg">{{item.name}}</view>
<view class="conts">
<view class="contitem" v-for="(its,indexs) in list">
<image src="../../static/homepage_icon_service_selected@2x.png"></image>
<text>{{its.name}}</text>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
list: [
{
name: '拓展管理',
eg:'a'
},
{
name: '仓库管理',
eg:'b'
},
{
name: '财务管理',
eg:'c'
},
{
name: '精准营销',
eg:'d'
},
{
name: '报表查询',
eg:'e'
},
{
name: '车型查询',
eg:'f'
},
{
name: '覆盖分布',
eg:'g'
},
{
name: '仓库智能模块',
eg:'h'
},
{
name: '服务反馈',
eg:'i'
}
],
current: 0,
};
},
methods: {
change(index) {
console.log(this.list[index].name)
this.current = index;
//从评论区域回到顶部
uni.createSelectorQuery().select("."+this.list[index].eg).boundingClientRect(data=>{//目标位置的节点:类或者id
uni.createSelectorQuery().select(".arc-content").boundingClientRect(res=>{//最外层盒子的节点:类或者id
uni.pageScrollTo({
duration: 100,//过渡时间
scrollTop:data.top - res.top-80 ,//到达距离顶部的top值
})
}).exec()
}).exec();
},
tapwhole:function(){
uni.navigateTo({
url:'whole/whole'
})
}
}
};
</script>
<style lang="scss">
page{
background: #F3F3F3;
}
.u-tabs{
position: fixed;
top: 0;
left: 0;
z-index: 999;
}
.titles {
font-size: 36upx;
height: 80upx;
width: 100%;
line-height: 80upx;
padding-left: 24upx;
font-weight: 500;
}
.conts {
width: 100%;
display: flex;
flex-wrap: wrap;
padding-bottom: 32upx;
}
.contitem {
width: 25%;
display: flex;
flex-direction: column;
align-items: center;
margin-top: 32upx;
}
.contitem image,
.offeritem image {
width: 48upx;
height: 48upx;
}
.myoffer {
margin-top: 16upx;
background: #fff;
}
.offer {
width: 100%;
height: 160upx;
display: flex;
justify-content: space-around;
}
.offeritem {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 32upx;
}
</style>
更多推荐
已为社区贡献10条内容
所有评论(0)