1***@163.com
1***@163.com
  • 发布:2020-09-30 14:27
  • 更新:2020-09-30 14:27
  • 阅读:7332

uni-app滚动问题,切换tab让下面的内容滚动到相应位置

分类:uni-app

HTML部分

scroll-y="true" style="height: 500px;" :scroll-top="scrollTop" @scroll="scroll" 这四项都得有

高度需要设置一个具体值,可用变量,有时会用到uni.getSystemInfo获取屏幕高度进一步计算

<scroll-view scroll-y="true" style="height: 500px;" :scroll-top="scrollTop"  @scroll="scroll">  
</scroll-view>

data部分 俩变量

scrollTop: 100,  
old: {  
    scrollTop: 0  
},

methods部分

scroll(e) {  
    this.old.scrollTop = e.detail.scrollTop  
},
// 使页面元素滚动的方法(切换两个tab让下面的内容滚动到紧挨着tab下面)  
changeRuleItem(item, index) {  
                this.policyTitle.map( (current, cindex) => {  
                    if (index == cindex) {  
                        current.active = true;  
                    } else {  
                        current.active = false;  
                    }  
                })  
                var that = this;  
                this.scrollTop = this.old.scrollTop; // 先初始化scrollTop为上次滚动值  
                if (this.policyTitle[0].active) {  
                    uni.createSelectorQuery().select("#policy-begin").boundingClientRect(data=>{//目标节点  
                      uni.createSelectorQuery().select(".check-popup").boundingClientRect((res)=>{//最外层盒子节点  
                            setTimeout(gogogo, 100);  
                            function gogogo() {  
                                const query = uni.createSelectorQuery().in(that);  
                                query.select('#policy-pop').boundingClientRect(data => {  
                                    if (data) {  
                                        console.log()  
                                        that.scrollTop = res.top - data.top;  
                                    }  
                                }).exec();  
                            }  
                      }).exec()  
                    }).exec();  

                } else {  
                    uni.createSelectorQuery().select("#policy-luggage").boundingClientRect(data=>{//目标节点  
                      uni.createSelectorQuery().select("#policy-begin").boundingClientRect((res)=>{//最外层盒子节点  
                            setTimeout(gogogo, 100);  
                            function gogogo() {  
                                const query = uni.createSelectorQuery().in(that);  
                                query.select('#policy-pop').boundingClientRect(data1 => {  
                                    if (data) {  
                                        that.scrollTop = data.top - res.top;  
                                    }  
                                }).exec();  
                            }  
                      }).exec()  
                    }).exec();  
                }  
            }  

尚未解决的问题

  1. 没有滚动过程
  2. 没弄清楚怎么精确到指定位置
0 关注 分享

要回复文章请先登录注册