先看一下效果

我们希望点击不居中的元素时可以自动居中,下面看一下实现的思路:

1. 获取屏幕宽度的一半
2. 获取点击元素距离屏幕左边的距离
3. 获取点击元素的宽度一半
4. 获取已经滚动的距离
5. 计算距离的变化:点击元素与屏幕左边的距离-屏幕的一半+点击元素宽度的一半
6. 计算最终需要滚动的距离:原先滚动距离+变化距离

在往下看之前先大致了解一下各变量代表的含义

// 大多数计算用到的参数,都在moveParams对象中moveParams: {    scrollLeft: 0, // scroll-view滚动的距离,默认为0,因为没有触发滚动    subLeft, //点击元素距离屏幕左边的距离    subHalfWidth, //点击元素的宽度一半    screenHalfWidth //屏幕宽度的一半 }

涉及到滚动距离的组件scroll-view最合适
wxml

view class="container"  view    view class="sub-title"demo/view    scroll-view scroll-with-animation scroll-x class="title-scroll-view" bindscroll="scrollMove" scroll-left='{{scrollLeft}}'      view wx:for="{{nav}}" wx:key="*this"         class="title-item {{activeIdx === index ? 'active' : ''}}"        bindtap="choseNav" id="ele{{index}}" data-index='{{index}}'{{item}}/view    /scroll-view  /view/view

直接使用组件是没法向左滚动的还需要设置一下wxss样式,这是能否滑动的关键

.title-scroll-view{  overflow:hidden;  white-space:nowrap;}

布局样式搞定后是关键的js代码了

首先通过wx.getSystemInfo获取系统信息,也就是屏幕的一半

然后获取点击元素的一些信息,这里我们使用wx.createSelectorQuery()API,它类似于jquery的选择器,我们将从这里获取到点击元素的所有重要信息,因为它类似于jquery选择器,所以需要在组件上设置属性让其选择,最好的方法是使用id选择,这就是为什么wxml代码中有id="ele{{index}}",因为JS中讲究单一职责原则,点击事件我只改变点击元素的选择状态,获取元素信息的代码单独放在一个函数中,id作为参数传入

getRect(ele) { //获取点击元素的信息,ele为传入的id    var that = this;    wx.createSelectorQuery().select(ele).boundingClientRect(function (rect) {      let moveParams = that.data.moveParams;      moveParams.subLeft = rect.left;      moveParams.subHalfWidth = rect.width/2;      that.moveTo();    }).exec()  }

点击事件职责仅改变点击元素状态

 choseNav: function(e) {   let ele = 'ele' + e.target.dataset.index   this.setData({     activeIdx: e.target.dataset.index   });   this.getRect('#'+ele); },

获取滚动的距离

  scrollMove(e) {    let moveParams = this.data.moveParams;    moveParams.scrollLeft = e.detail.scrollLeft;    this.setData({      moveParams: moveParams    })  },

最后完成计算,将得到的值传递到scroll-view的scroll-left中

  moveTo: function() {    let subLeft = this.data.moveParams.subLeft;    let screenHalfWidth = this.data.moveParams.screenHalfWidth;    let subHalfWidth = this.data.moveParams.subHalfWidth;    let scrollLeft = this.data.moveParams.scrollLeft;    let distance = subLeft - screenHalfWidth + subHalfWidth;    scrollLeft = scrollLeft + distance;    this.setData({      scrollLeft: scrollLeft    })  }

github地址: https://github.com/baobz/wxNav