- 两个scroll-view联动,设置另一个的 scroll-left
求助一下,两个scroll-view 联动,一个设置另一个scroll-view的 scroll-left,setData 有延迟,卡顿。还有其他方法吗?
2018-02-04 - 关于顶部导航条与内容联动
页面有两个 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)*/ }[图片] 在手机上下滚动,顶部导航条左右切换时 屏幕抖动特别严重
2018-03-22