微信小程序-商城类头部选项卡切换（可滑动+类目多时点击移动至中间）

微信小程序-商城类头部选项卡切换（可滑动+类目多时点击移动至中间）

网上找了很多，虽然可以滑动，但是都是手动把后面隐藏的选项卡拉出后再点击，体验肯定一般！感觉我的这个还行，分享一下吧！

这里只写头部的切换效果，下面的切换内容自己就不在写了。好了，直接上代码！

wxml页面代码

  
    全部
    休闲食品
    水果
    生鲜果蔬
    酒水乳饮
    粮油干调
    家居百货
    安防/五金
  

wxss样式页面代码

.recommend_scroll_x_box{
  width: 100%;
  box-sizing: border-box;
  padding: 0 25rpx;
  height: 80rpx;
  white-space: nowrap; 
  display: flex; 
  margin-top: 3rpx;
  background-color: white;
}
::-webkit-scrollbar{width: 0; height: 0; color: transparent;} 
.recommend_hot_box{
  height: 80rpx; 
  box-sizing: border-box; 
  line-height: 80rpx;
  margin-right: 15rpx; 
  display: inline-block; 
  color: #333;
  font-size: 30rpx;
  padding: 0 25rpx;
}
.recommend_hot_box.active{ 
  color: #E9130D;
  border-bottom: 4rpx solid #E9130D;
}

js文件代码

Page({
  data: {
    tabindex: '0', //分类索引
    moveParams: {
      scrollLeft: 0, // scroll-view滚动的距离,默认为0,因为没有触发滚动
      subLeft: 0, //点击元素距离屏幕左边的距离
      subHalfWidth: 0, //点击元素的宽度一半
      screenHalfWidth: 187.5, //屏幕宽度的一半
    },
  },
  // tab滑动动画
  getRect(ele) { //获取点击元素的信息,ele为传入的id
    var that = this;
    wx.createSelectorQuery().select(ele).boundingClientRect(function (rect) {
      let moveParams = that.data.moveParams;
      // console.log(ele, moveParams, rect.left)
      moveParams.subLeft = rect.left; //该元素距离最左侧的位置
      moveParams.subHalfWidth = rect.width / 2;
      // 该元素的宽度一半
      that.moveTo();
    }).exec()
  },
  changetab: function (e) {
    let ele = 'ele' + e.target.dataset.current
    if (e.target.dataset.current)
      this.setData({
        tabindex: e.target.dataset.current,
        fenleiid: e.target.dataset.id,
        nowpage: 1,
        scrollTop: 0,
        sousuokong: false,
        chudi: false
      });
    this.getRect('#' + ele);
  },
  scrollMove(e) {
    let moveParams = this.data.moveParams;
    moveParams.scrollLeft = e.detail.scrollLeft;
    this.setData({
      moveParams: moveParams
    })
  },
  moveTo: function () {
    let subLeft = this.data.moveParams.subLeft; //该元素距离最左侧的位置
    let screenHalfWidth = this.data.moveParams.screenHalfWidth; //187.5屏幕宽度
    let subHalfWidth = this.data.moveParams.subHalfWidth; // 该元素的宽度一半
    let scrollLeft = this.data.moveParams.scrollLeft; //滚动的距离
    let distance = subLeft - screenHalfWidth + subHalfWidth;

    scrollLeft = scrollLeft + distance;
    this.setData({
      scrollLeft: scrollLeft
    })
  }
})

是不是？！ 很好用！！