收藏
回答

关于顶部导航条与内容联动

框架类型 API/组件名称 终端类型 操作系统 微信版本 基础库版本
小程序 scroll-view 客户端 6.6.5 1.9.1

页面有两个

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)*/


     }



在手机上下滚动,顶部导航条左右切换时  屏幕抖动特别严重

回答关注问题邀请回答
收藏

4 个回答

  • 小程序运营专员 - cunjin
    小程序运营专员 - cunjin
    2018-03-27

    可否预先计算好各个wx-shop-body的位置不?

    2018-03-27
    有用
    回复
  • 小程序运营专员 - cunjin
    小程序运营专员 - cunjin
    2018-03-26

    wx.createSelectorQuery().selectAll('.wx-shop-body')会有一些性能损耗,

    不建议在scroll里面频繁调用

    2018-03-26
    有用
    回复
  • 为远
    为远
    2018-03-27

    @cunjinli 抱歉!可以是可以,但是会引发新的问题。我获取wx-shop-body的位置,将其放在数组里,然后监听滚动,判断元素位置时得循环,这样会导致用户滑动特别快时,导航条切换不及时,然后导航条那一块跳动,这样其实只是把垂直方向的问题,换到了水平方向而已。

    2018-03-27
    有用 1
    回复
  • wzwzwz
    wzwzwz
    2018-03-27

    @cunjinli 不建议,那建议怎么实现这个方案呢??

    2018-03-27
    有用
    回复
登录 后发表内容