微信小程序点击元素居中

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

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

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

// 大多数计算用到的参数,都在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

微信小程序点击元素居中

猜你喜欢