页面有两个
scroll-view
一个为x轴滚动,一个为y轴滚动,将这两个scroll-view联动时,屏幕抖动
<view class="wx-shop-con_scroll" >
<scroll-view class="scroll-nav"
scroll-into-view="{{falseNav}}"
scroll-left="{{leftNum}}"
scroll-x="true" style="white-space: nowrap;width: 100%;" >
<repeat for="{{navItems}}" wx:for-index="index" >
<view
id="{{'navID'+index}}"
class="scroll-nav-item {{ index === navID ? 'active' : '' }}"
@tap="navClick({{index}})">
{{item.name}}
</view>
</repeat>
</scroll-view>
</view>
<scroll-view class="scroll-nav"
scroll-y="true"
bindscroll="scroll"
bindscrolltoupper="abc"
scroll-into-view="{{toView}}" style="height: 100%;" >
<view style="width: 100%;height: 100px;"></view>
<repeat for="{{shopList}}" key="index" index="index" item="item">
<view class="wx-shop-body" id="{{'navID'+index}}">
<view class="wx-shop-body-text">
<text class="body-textFont-icon"></text>
<text class="wx-shop-body-textFont">{{item.categoryName}}</text>
<text class="body-textFont-icon"></text>
</view>
<repeat for="{{item.osProducts}}" key="itemIndex" index="indexIndex" item="data">
<view @tap="wareDetailsTo({{data.osProductId}})" class="wx-shop-commodity">
<view class="commodity-left">
<image src="{{data.shortImgUrl}}" class="commodity-left-img"></image>
</view>
<view class="commodity-right">
<view class="commodity-right-title">
<text class="shop-label {{data.className}}">{{data.message}}</text>
<text>{{data.name}}</text>
</view>
<view class="commodity-right-money">
<text>¥{{data.realPrice}}</text>
<text class="lineMoney">¥{{data.originalPrice}}</text>
<view class="wareList_right_button_all">
<button class="wareList_right_button"
wx:if="{{data.addTrue}}"
data-index="{{indexIndex}}"
hover-class="wareList_right_button_click"
@tap.stop="minus({{data}},{{indexIndex}},{{index}})">-</button>
<text wx:if="{{data.addTrue}}"
class="wareList_right_text">{{data.cartNum}}</text>
<button class="wareList_right_button"
data-index="{{indexIndex}}"
hover-class="wareList_right_button_click"
@tap.stop="plus({{data}},{{indexIndex}},{{index}})">+</button>
</view>
</view>
</view>
</view>
</repeat>
</view>
</repeat>
<view style="width: 100%;height: 80px;"></view>
</scroll-view>
//失去焦点时
loseCursor(e){
const vm=this;
searchShop(vm.globalVariable.onlineStoreId,e.detail.value).then(res=>{
vm.shopList=res.res;
vm.navItems.forEach(function (data,index) {
if(res.res[0].categoryName==data.name){
vm.navID=index;
vm.toView='navID'+index;
vm.$apply();
}
})
vm.$apply();
})
}
getAllRects(){
const vm=this;
wx.createSelectorQuery().selectAll('.wx-shop-body').boundingClientRect(function(rects){
rects.forEach(function(rect,index){
console.log(rect.id)
if(rect.top<=100){
vm.toView='navID'+index;
vm.navID=index;
if(vm.falseNav!=''||index>3){
vm.falseNav=vm.toView;
}
}
})
}).exec()
}
//监听滚动,判断滚动位置
scroll(e) {
const vm=this;
/* setTimeout(()=>{*/
vm.getAllRects();
/*},800)*/
}
在手机上下滚动,顶部导航条左右切换时 屏幕抖动特别严重
可否预先计算好各个wx-shop-body的位置不?
wx.createSelectorQuery().selectAll('.wx-shop-body')会有一些性能损耗,
不建议在scroll里面频繁调用
@cunjinli 抱歉!可以是可以,但是会引发新的问题。我获取wx-shop-body的位置,将其放在数组里,然后监听滚动,判断元素位置时得循环,这样会导致用户滑动特别快时,导航条切换不及时,然后导航条那一块跳动,这样其实只是把垂直方向的问题,换到了水平方向而已。
@cunjinli 不建议,那建议怎么实现这个方案呢??