小程式-雲開發 bindscroll滾動事件執行setData（）方法，導致scroll-view檢視抖動

風隨心動*發表於2020-05-17
事件View

需求描述

想做一個類似京東小程式首頁功能列表左右滑動的效果，效果圖如下

 

遇到的問題

1. 如何讓scroll-view顯示兩行

做過小程式開發的都知道，scroll-view要麼顯示一行，可以左右滾動，如果顯示兩行的話就會適應螢幕寬度，達不到左右滾動的效果，所以我們需要改變一下我們的資料結構





        [{


          item: [{


            "_id": "2",


            "id": 7,


            "name": "javaScript",


            "style": "#fef2ce",


            "url": "https://6366-cfxy-mall-pxwnv-1256640731.tcb.qcloud.la/classfication_images/java-script.png?sign=bc895f0a0344a1415b9b829713bf111c&t=1563077572"


          }, {


            "_id": "3",


            "id": 2,


            "name": "vue",


            "style": "#EB7347",


            "url": "https://6366-cfxy-mall-pxwnv-1256640731.tcb.qcloud.la/classfication_images/Vue.png?sign=37ba4970e938cb3419b3209d572a8013&t=1563077541"


          }]


        }, {


          item: [{


            "_id": "4",


            "id": 1,


            "name": "小程式",


            "style": "#fc9",


            "url": "https://6366-cfxy-mall-pxwnv-1256640731.tcb.qcloud.la/classfication_images/%E5%B0%8F%E7%A8%8B%E5%BA%8F.png?sign=1513baa85fdce9f0f5ee0a2d496c1613&t=1563077605"


          }, {


            "_id": "5",


            "id": 4,


            "name": "瀏覽器",


            "style": "#00CCFF",


            "url": "https://6366-cfxy-mall-pxwnv-1256640731.tcb.qcloud.la/classfication_images/%E6%B5%8F%E8%A7%88%E5%99%A8.png?sign=a315bc182fc89b7adb65a07c4da96eac&t=1565352298"


          }]


        }, {


          item: [{


            "_id": "6",


            "id": 5,


            "name": "android",


            "style": "#AEDD81",


            "url": "https://6366-cfxy-mall-pxwnv-1256640731.tcb.qcloud.la/classfication_images/Android.png?sign=3411681e3b4d3eba93566a19f8c5a297&t=1563077457"


          }, {


            "_id": "7",


            "id": 3,


            "name": "react",


            "style": "#13227a",


            "url": "https://6366-cfxy-mall-pxwnv-1256640731.tcb.qcloud.la/classfication_images/React.png?sign=b6466f2dbea9d0d83da78e0fa04e3b40&t=1563077529"


          }]


        }, {


          item: [{


            "_id": "8",


            "id": 8,


            "name": "css3",


            "style": "#e1d7f0",


            "url": "https://6366-cfxy-mall-pxwnv-1256640731.tcb.qcloud.la/classfication_images/CSS.png?sign=4661566c2350d00d3cd1ddd66967f96a&t=1563077493"


          }, {


            "_id": "9",


            "id": 6,


            "name": "nodeJS",


            "style": "#fadbd9",


            "url": "https://6366-cfxy-mall-pxwnv-1256640731.tcb.qcloud.la/classfication_images/Nodejs.png?sign=084f064382cdd700c5586a7e6ea65f30&t=1563077507"


          }]


        }, {


          item: [{


            "_id": "10",


            "id": 9,


            "name": "html5",


            "style": "#D24D57",


            "url": "https://6366-cfxy-mall-pxwnv-1256640731.tcb.qcloud.la/classfication_images/html5.png?sign=65a8c526612ceb1edc217767c3e19a2f&t=1563077559"


          }, {


            "_id": "1",


            "id": 10,


            "name": "旅拍",


            "style": "#e8f4d9",


            "url": "https://6366-cfxy-mall-pxwnv-1256640731.tcb.qcloud.la/classfication_images/%E6%97%85%E6%8B%8D%E7%85%A7.png?sign=3b3311d664f368e6525a7fb5e13d76b1&t=1565856664"


          }]


        }]






我們再來看看wxml如何渲染這些資料




<scroll-view class="classfication-scroll" scroll-with-animation='true' scroll-anchoring='true' scroll-x enable-flex bindscroll='bindscroll'>
 <view class="scroll-view-item">
    <view wx:for="{{classficationList}}" class="child">
       <view class='classfication-view' wx:for="{{item.item}}" wx:for-item='child' wx:key="_id" wx:if="{{child._id<50}}" data-id='{{child.id}}' data-name='{{child.name}}' bindtap='click'>
          <view class='image' style='background:{{child.style}}'>
                <image src="{{child.url}}" />
            </view>
             <view class='name'>{{child.name}}</view>
          </view>
    </view>
  </view>
</scroll-view>




 


2. 如何讓底部的scroll-bar跟隨著上面的功能列表進行滑動


首先需要獲取scroll-view滑動的距離，這裡用到scroll-view的bindscroll='bindscroll'方法，








  bindscroll(event) {


    const {scrollLeft,scrollWidth} = event.detail;


    var sc = this.data.scrollWidth; // 螢幕寬度


    var canScroll = scrollWidth - sc; // 能滾動的寬度


    var move = scrollLeft / canScroll / 2 * 100;


    this.setData({


      scrollBar: move


    })


  }






關鍵程式碼：




var move = scrollLeft / canScroll / 2 * 100;




3. 如何解決左右滑動檢視抖動的問題


解決方案：當滑動到最左或者左右的時候直接return，不執行setData方式，減少效能消耗




  bindscroll(event) {
    const {
      scrollLeft,
      scrollWidth
    } = event.detail;
    if (scrollLeft < 0) { // 向右滑動時超出螢幕就return
      return
    }
    var sc = this.data.scrollWidth; // 螢幕寬度
    var canScroll = scrollWidth - sc; // 能滾動的寬度
    if (scrollLeft > canScroll) { // 向左滑動時超出螢幕就return
      return
    }
    var move = scrollLeft / canScroll / 2 * 100;
    this.setData({
        scrollBar: move
      })
  },




 


4. 使用防抖的思想再次優化快速滑動時的效能消耗




  bindscroll(event) {
    const {
      scrollLeft,
      scrollWidth
    } = event.detail;
    if (scrollLeft < 0) { // 向右滑動時超出螢幕就return
      return
    }
    var sc = this.data.scrollWidth; // 螢幕寬度
    var canScroll = scrollWidth - sc; // 能滾動的寬度
    if (scrollLeft > canScroll) { // 向左滑動時超出螢幕就return
      return
    }
    var timer = null;
    var _this = this
    timer = setTimeout(() => {
      clearTimeout(timer)
      var move = scrollLeft / canScroll / 2 * 100;
      _this.setData({
        scrollBar: move
      })
    }, 300);
  },








相關文章