前言
最近在做一个微信小程序，看到有许多软件上都有一种带有图片可以滑动的Tab栏，然后我就去看了一些组件库，包括Vant，WeUI，发现他们所提供的Tab栏好像都只有标题（title）的功能， 假如是我没发现可以指正 ，并不可以添加图片，那我就突发奇想，干脆自己封装一个得了，下面先给大家看一下效果

一、成品效果

二、使用步骤

wxml代码如下：

<scroll-view     
        scroll-x="true" 
        class="scroll-view-x" 
        style="padding-top:10rpx" 
        scroll-with-animation="true"
        scroll-left='{{nowleft}}'     
        bindscroll="getleft"
        data-id="111">
    <view>
    <!-- 里面的tab的单个对象 -->
            <view 
                wx:for="{{tabList}}"
                wx:for-index="item"
                class="tab {{nowselect === item ? 'active' :''}}" 
                wx:key="item"
                bindtap="getProductList"
                data-index="{{item+1}}"
                data-id="item"
            >    
            <view class="roundImg">
                <image class="tab_icon" src="../../../static/images/beer.png" ></image>
            </view>
            <text class="tab_text">热销{{item+1}}</text>
            </view>
        </view>
        
    </scroll-view>

js代码如下：

// pages/unceter/index/index.js
const query = wx.createSelectorQuery()    //选取wxml的dom元素
let systemInfo = wx.getSystemInfoSync(); //获取屏幕的尺寸大小
        
Page({

  /**
   * 页面的初始数据
   */
  data: {
    tabList:[1,2,3,4,5,6,7,8,9,10,11,12],
    index:1,
    nowleft:0,    //scroll往左走多少
    nowselect:0    
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onl oad: function (options) {
    this.setData({
            windowHeight: systemInfo.windowHeight - 35,
            windowWidth: systemInfo.windowWidth,
        })
  },
  getProductList(e){
    console.log(e.currentTarget.dataset.index);
    console.log(this.data.windowWidth);
    let proportion = this.data.windowWidth/375; 
    //真机调试得出每个手机屏幕不同，我在微信工具这里满屏是375，在真机iphone11那里是414所以要获取屏幕宽度除以375获取比例
    let index = e.currentTarget.dataset.index
    let length = this.data.tabList.length //获取当前有多少个按钮
    this.setData({nowselect:index-1}) //获取当前的Index
    if(length>5){//长度必须超过5才可以用
      if(index<=3){ //由于我这个组件从1开始所以是小于等于3，从0开始的话就小于2
        this.setData({nowleft:0})
      }
      else if(index>=length - 2){//由于我这个组件从1开始所以是大于等于length - 2，从0开始的话就小于大于等于length - 3
        this.setData({nowleft:75*(length-5)*proportion})  //让倒数第三个在中间
      }
      else{
        this.setData({nowleft:75*(index-3)*proportion}) //让现在点击的在中间
      }
    }
    // this.setData({nowleft:75*(index-1)})
    console.log(this.data.nowleft);
  },
 

.tab{
  height: 75rpx;
  display: inline-block;
  width:150rpx;
  text-align:center;
}

.tab_icon{
  width: 50rpx;
  height: 50rpx;
  margin: 0 auto;
  text-align:center;
  display: block;
  border: solid 4rpx rgb(255, 255, 255);
  padding: 5rpx;
  border-radius: 50%;
  margin-top: 8rpx;
}
.active{
  transform:scale(1.15) translate(0,-5%);
  color: rgb(199, 92, 42);
  font-weight: 700;
}
.active .tab_text{
  background-color: #fff;
  color: rgb(199, 92, 42);
}
.tab_text{
  font-size: 18rpx;padding: 0 8rpx 0 8rpx;background-color: rgb(50, 109, 73);border-radius:100rpx;color: #fff;position: relative;top: -3rpx;
}
.scroll-view-x{
  background-color: rgb(50, 109, 73);
  white-space: nowrap;
  transition: all .3s;
  height: 120rpx;
}

感谢博主，自己实际应用中做了适当调整！

转： https://blog.csdn.net/m0_65035567/article/details/121849679