小程序导航栏选择每一项居中(scroll-view)

前言

在项目中遇到点击scroll-view中每一项使其居中，查看文档后发现有scroll-view有属性scroll-into-view可以根据id来定位每一项，但是无法居中，于是我想到了使用scroll-left来计算滚动距离是使一项居中.

查看效果

完成思路

1. 获取屏幕宽度的一半（srceenHalfWidth）
2. 获取元素宽度的一半（即subHalfWidth）
3. 获取元素到手机屏幕左边的距离（即元素的subLeft）
4. 计算scroll-view需要滚动的距离：needScroll = subLeft - srceenHalfWidth + subHalfWidth
5. 监听scroll-view滚动获取上次滚动的距离（prevDistance）
   
6. 计算scroll-left属性的值 scroll-left= needScroll + prevDistance

wxml代码

<scroll-view class="power-view" scroll-x="true" scroll-with-animation="true" scroll-left="{{scrollLeft}}" bindscroll="scrollMove">
    <block wx:for="{{powerList}}" wx:key>

        <view class="item {{index == activeIdx?'active':''}}" bindtap="chooseSub" id="v{{index}}" data-index="{{index}}">
          <view class="icon"></view>
          <view class="text">全年海量优惠</view>
        </view>

    </block>

  </scroll-view>

js代码

data: {
    powerList: ['v1', 'v2', 'v3', 'v4', 'v5', 'v6', 'v7', 'v8', 'v9', 'v10', 'v11', 'v12'],
    activeIdx: 0, //选中的index
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

    let scrollInfo = {
      prevDistance: 0, //滚动条的距离（默认为0）
      screenHalfwidth: wx.getSystemInfoSync().windowWidth / 2, 
    }

    this.data.scrollInfo = scrollInfo; 

  },

  //选择某一项类目
  chooseSub: function(e) {

    let index = e.currentTarget.dataset.index;

    this.setData({
      activeIdx: index
    })
    this.getRect(index);
  },

  //获取类目的宽高
  getRect: function (index) {

    let that = this;
    let query = wx.createSelectorQuery();
    query.select("#v" + index).boundingClientRect(function (rect) {

      that.data.scrollInfo.subLeft = rect.left; //元素一半宽度
      that.data.scrollInfo.subHalfWidth = rect.width / 2; 

      that.moveTo();
    }).exec()

  },

  //移动导航栏
  moveTo: function() {
    let subLeft = this.data.scrollInfo.subLeft;
    let subHalfWidth = this.data.scrollInfo.subHalfWidth;
    let prevDistance = this.data.scrollInfo.prevDistance;
    let screenHalfwidth = this.data.scrollInfo.screenHalfwidth;

    let needScroll = subLeft - screenHalfwidth + subHalfWidth;
    let scrollLeft = needScroll + prevDistance;

    this.setData({
      scrollLeft: scrollLeft
    })
  },

  //记录滚动的距离
  scrollMove: function(e) {

    let distance = e.detail.scrollLeft;
    this.data.scrollInfo.prevDistance = distance
  },

结尾

有两种特殊情况

1. 当scroll-left < 0，scroll-view会滚动到 scroll-left = 0;
   
2. 当scroll-left > maxScroll，scroll-view会滚动到 scroll-left = maxScroll;

所以还是正常运行.