100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > 微信小程序页面竖向滚动逻辑

微信小程序页面竖向滚动逻辑

时间:2020-07-07 07:57:00

相关推荐

微信小程序页面竖向滚动逻辑

微信小程序页面竖向滚动逻辑

1.实现下面类似的数组

注:下面这个生成的数组最好是整数,滑动的时候会失去精度的,要不然你永远会差一点,让你崩溃的。而且你永远不知道差在哪里。

this.leftScrollArr = [367, 698, 1029, 6750, 7816, 8882, 11173, 14199]

2.在scroll里面写以下逻辑

注:我下方减10的原因是因为onpagescroll滑动事件是有延迟的,比如他698落到下面一个区间,他那个地方滑到了698但是你会发现并没有落入那个区间,而是要向下滚动多一点才会到达,因此我们就把区间减小,让他提前落入这个区间,所以减了10,而这个10是没有什么算的,是凑出来的。我也想不到更好的办法,也不明白哪里差了,反正需求是实现了。

for(let i = 0; i < this.leftScrollArr.length; i++){if(e.scrollTop > this.leftScrollArr[this.leftScrollArr.length-1]){this.curNav = this.leftScrollArr.length-1;break;}else if(e.scrollTop >= this.leftScrollArr[i]-10 && e.scrollTop < this.leftScrollArr[i+1]){this.curNav = ibreak;}}

注意点:

1.上方的状态栏和你写的那种自定义导航栏一定要动态获取,要不然不兼容,特别是ipad。

//状态栏this.statusBarHeight = wx.getStorageSync('statusBarHeight');// 导航栏高度this.navigationBarHeight = wx.getStorageSync('navigationBarHeight')

2.使用微信小程序的scrollTo一定要用下面这个东西进行设置值,要不然没效果的。

if (wx.pageScrollTo) {// wx.pageScrollTo({scrollTop: this.scrollTop ,duration:500})wx.pageScrollTo({scrollTop: this.scrollTop})}

3.后面就是你直接通过下面这种办法动态获取高度就可以了

var heade = wx.createSelectorQuery();var head = 0;heade.select('.search').boundingClientRect().exec(res => {if(res && res[0]){head = res[0].height;console.log(headTopHeight,'头部盒子')}})//后面就是我算的产品滑动高度了,可以参考下。这个不是最优的。//bigCategory产品的个数,rightItemHeight是产品的高度,letTitleHeight是产品的标题高度let bigCategory = [1,2,4,8,2];for(let j = 0; j < this.bigCategory.length;j++){if(j > 0){leftHeight += (this.bigCategory[j - 1] * rightItemHeight + this.letTitleHeight)}this.leftScrollArr.push(leftHeight)}

4.苹果手机刷新频率过高,导致页面滑动的右侧区间没有反应过来,出现的效果就是,你没有滑动,右边还是在坐过山车一样。他可以解决刷新频率减半,但是不建议使用,安卓可能卡顿,不流畅。其他办法目前不知道。

// if (this.wait) {//let that = this;//that.wait = false;// // this.tempTime = setTimeout(function (e) { that.wait = false;}, 10);//return;// } else {//this.wait = true;//if (this.tempTime) { clearTimeout(this.tempTime); }// }

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。