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

水深无声 2024-04-17 17:41 31阅读 0赞

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

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

![在这里插入图片描述][20190829165804545.png]  
![在这里插入图片描述][20190829165827150.png]  
这里只写头部的切换效果，下面的切换内容自己就不在写了。好了，直接上代码！

## wxml页面代码 ##

<view>
      <scroll-view class="recommend_scroll_x_box" scroll-x="true" scroll-with-animation bindscroll="scrollMove" scroll-left='{
       {scrollLeft}}'>
        <text id='ele0' class="list recommend_hot_box {
       {tabindex==0 ? 'active' : ''}}" data-current="0" catchtap="changetab">全部</text>
        <text id='ele1' class="list recommend_hot_box {
       {tabindex==1 ? 'active' : ''}}" data-current="1" catchtap="changetab">休闲食品</text>
        <text id='ele2' class="list recommend_hot_box {
       {tabindex==2 ? 'active' : ''}}" data-current="2" catchtap="changetab">水果</text>
        <text id='ele3' class="list recommend_hot_box {
       {tabindex==3 ? 'active' : ''}}"  data-current="3" catchtap="changetab">生鲜果蔬</text>
        <text id='ele4' class="list recommend_hot_box {
       {tabindex==4 ? 'active' : ''}}" data-current="4" catchtap="changetab">酒水乳饮</text>
        <text id='ele5' class="list recommend_hot_box {
       {tabindex==5 ? 'active' : ''}}" data-current="5" catchtap="changetab">粮油干调</text>
        <text id='ele6' class="list recommend_hot_box {
       {tabindex==6 ? 'active' : ''}}" data-current="6" catchtap="changetab">家居百货</text>
        <text id='ele7' class="list recommend_hot_box {
       {tabindex==7? 'active' : ''}}" data-current="7" catchtap="changetab">安防/五金</text>
      </scroll-view>
    </view>

## 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
        })
      }
    })

[20190829165804545.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/0e149d182d3240cd94bf548029b90f65.png
[20190829165827150.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/54a9b7c436f44fdba5202724e8b55d88.png