| uni | 您所在的位置：网站首页 › 锚点链接怎么用 › uni |
uni
|
将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插件） {{item.name}} {{its.name}} 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' }) } } }; 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; }
|
【本文地址】
公司简介
联系我们