小程序scrollview滚动居中

前言

商场里的一个小需求
小程序 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 加交流群，给我提意见，交流学习。