使用wx.pageScrollTo时,如果页面中有元素的POSITION为absolute或fixed时,这个元素会先消失,然后再出现,导致屏幕闪烁。
wxml部分:
<view style=‘position:relative;’>
<view style=‘position:fixed;left:0;top:0;width:20%; height: 100%;display:flex;flex-direction:column;’>
<view style=‘width:100%;height:30px;background-color:blue’ bindtap=‘clickLeftColor’ data-scrolltop=’{{scrollTop}}’></view>
</view>
<view style=‘width:79%;float:right;’>
<view style=‘width:100%;height:330px;background-color:yellow’></view>
<view style=‘width:100%;height:330px;background-color:green’></view>
<view style=‘width:100%;height:330px;background-color:greenyellow’></view>
<view style=‘width:100%;height:330px;background-color:yellow’></view>
<view style=‘width:100%;height:330px;background-color:green’></view>
<view style=‘width:100%;height:330px;background-color:greenyellow’></view>
<view style=‘width:100%;height:330px;background-color:yellow’></view>
<view style=‘width:100%;height:330px;background-color:green’></view>
<view style=‘width:100%;height:330px;background-color:greenyellow’></view>
</view>
</view>
js部分:
Page({
data: {
scrollTop:100
},
clickLeftColor: function (e) {
console.log(e)
var scrolltop=e.target.dataset.scrolltop;
wx.pageScrollTo({
scrollTop: this.data.scrollTop,
duration: 300
})
this.setData({
scrollTop: scrolltop+100
})
}
})