小程序scroll-view滾動居中

前言

商場裏的一個小需求
小程序scroll-view開發一個可以滾動的tab組件，當點擊大於屏幕二分之一標籤時，將其移動到中間，點擊向下的箭頭展開所有，進行選擇
項目github地址
vue版本戳這裏vue時better-scroll 實現的類似的效果

使用

git clone https://github.com/sunnie1992/soul-weapp.git

開發者工具直接打開運行
將components下s-tab-scoller放到你的目錄下

// 在你的頁面json中引用
{
  "navigationBarTitleText": "橫向滾動",
  "usingComponents": {
    "s-tab-scoller": "/components/s-tab-scoller/index"
  }
}
wxml使用
<s-tab-scoller list="{{list}}" bindchange="navChange"></s-tab-scoller>

實現

組件接受一個list參數，我們有兩個參數要展示，標題和數量，開發者可以根據不同的需求進行修改
選擇標籤項觸發chooseNav方法

// components/s-float-icons/index.js
Component({
  externalClasses: ['ex-class'],
  properties: {
    list: Array
  },

  options: {
    multipleSlots: true
  },
  data: {
    showNavDrap: false,
    navIndex: 0,
    navScrollLeft: 0
  },

  /**
   * 組件的方法列表
   */
  methods: {
    showAllNav() {
      this.setData({
        showNavDrap: !this.data.showNavDrap
      })
    },
    //選擇
    chooseNav(e) {
      var item = e.currentTarget.dataset.item
      var index = e.currentTarget.dataset.index
      var pop = e.currentTarget.dataset.pop
      // 點擊彈出的選項（pop區分的是選擇的是滾動的tab還是下拉的tab）
      if (pop) {
        this.setData({
          showNavDrap: !this.data.showNavDrap
        })
      }
      var _this = this
      // 設置當前位置
      const query = wx.createSelectorQuery().in(this)
      query
        .selectAll('.label-item')
        .boundingClientRect(function(rect) {
          let width = 0
           // 循環獲取計算當前點擊的標籤項距離左側的距離
          for (let i = 0; i < index; i++) {
            width += rect[i].width
          }
          // 當大於屏幕一半的寬度則滾動，否則就設置位置爲0
          let clientWidth = wx.getSystemInfoSync().windowWidth / 2

          if (width > clientWidth) {
            _this.setData({
              navScrollLeft: width + rect[index].width / 2 - clientWidth
            })
          } else {
            _this.setData({
              navScrollLeft: 0
            })
          }
        })
        .exec()
      //設置當前樣式選中
      this.setData({
        navIndex: index
      })
      this.triggerEvent('change', item)
    }
  }
})

關於我

您可以掃描添加下方的微信並備註 Soul 加交流羣，給我提意見，交流學習。