小程序scroll-view滚动居中

前言

商场里的一个小需求
小程序scroll-view开发一个可以滚动的tab组件，当点击大于屏幕二分之一标签时，将其移动到中间，点击向下的箭头展开所有，进行选择
项目github地址
vue版本戳这里vue时better-scroll 实现的类似的效果

使用

git clone https://github.com/sunniejs/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)
    }
  }
})

关于我

获取更多技术相关文章，关注公众号”前端女塾“。
回复加群，即可加入”前端仙女群“

您可以扫描添加下方的微信并备注 Sol 加交流群，给我提意见，交流学习。