小程序 头部横向滚动nav

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    menuList: Array,
    currentTab: Number,
    windowWidth: Number,
    tabScroll: Number,
    count: Number
  },
  /**
   * 组件的初始数据
   */
  data: {

  },
  /**
   * 组件的方法列表
   */
  methods: {
    clickMenu: function (event) {
      var res = wx.getSystemInfoSync()
      // 获取window的宽度
      this.properties.windowWidth = res.windowWidth
      // 把宽度赋值给props里面的
      var current = event.currentTarget.dataset.current
      console.log(current)
      // 获取current
      // 获取每个的宽度
      var tabWidth = this.properties.windowWidth / 4
      this.setData({
        tabScroll: (current - this.properties.count / 2) * tabWidth
      })
      if (this.properties.currentTab == current) {
        return false
      } else {
        this.setData({
          currentTab: event.currentTarget.dataset.current
        })
        this.triggerEvent('clickMenu', {
          current: event.currentTarget.dataset.current
        }, {})
      }
    },

  }
})

<view class='container'>
	<scroll-view class="tab" scroll-x scroll-left="{{tabScroll}}" scroll-with-animation="true">
		<block wx:for="{{menuList}}" wx:key="index">
			<view class="tab-item " style="" data-current="{{index}}" bindtap='clickMenu'>
				<view class="item {{currentTab == index ? 'active' : ''}}">
					{{item.brand_name}}
				</view>
			</view>
		</block>
	</scroll-view>
</view>

/*使用*/
<vtabs menuList="{{nav_list}}" bind:clickMenu="clickMenus" count="3" />  

page {
        background: #F4F5F8;
}
.swipes {
        width: 750rpx;
        height: 750rpx;
}
.swipes image {
        width: 750rpx;
        height: 750rpx;
}
.topones {
        height: 105rpx;
        padding: 0 57rpx;
        box-sizing: border-box;
        background: #FFFFFF;
        overflow: hidden;
}
.topones .tile {

        font-size: 26rpx;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #2D2F3B;
        line-height: 46rpx;
        margin-top: 18rpx;
}
.topones .subtile {

        font-size: 20rpx;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #727888;
        line-height: 46rpx;
}
.twotops {
        height: 68rpx;
        border: 1rpx  #FF1E48 dotted;
        background: #FFEDF1;
        padding: 0 57rpx;
        display: flex;
        align-items: center;
}
.twotops .l1 {

        font-size: 16rpx;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #2D2F3B;
        line-height: 46rpx;
        margin-right: 20rpx;
}
.twotops .l2 {
        font-size: 26rpx;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #FF1E48;
        line-height: 46rpx;
}
.twotops .l3 {

        font-size: 18rpx;
        font-family: Microsoft YaHei;
        font-weight: 400;
        text-decoration: line-through;
        color: #AFB1BB;
        line-height: 46rpx;
}
.tretops {
        padding: 22rpx 57rpx;
        box-sizing: border-box;
        background: #FFFFFF;
}
.tiles {
        font-size: 22rpx;
}
.tiles::before {
        display: none;
}
.ban_ul {
        display: flex;
        flex-wrap: wrap;
        margin-top: 20rpx;
}
.ban_ul .ban_li {
        padding: 0 20rpx;
        height: 40rpx;
        background: #FFFFFF;
        border: 1rpx solid #E8E8E8;
        border-radius: 3rpx;
        font-size: 20rpx;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #2D2F3B;
        line-height: 40rpx;
        text-align: center;
        margin-right: 24rpx;
}
.acolor {
        color: #FF1E48 !important;
        border: 1rpx solid #FF1E48 !important;
}
.xq_dt {
        width: 750rpx;
        height: auto;
        background: #FFFFFF;
        margin-top: 24rpx;
        padding: 22rpx 57rpx;
        box-sizing: border-box;
        margin-bottom: 275rpx;
}
.pads {
        padding-bottom: 15rpx;
        box-sizing: border-box;
        border-bottom: 1rpx solid #E8E8E8;
        position: relative;
}
.pads::after {
        content: "";
        display: block;
        width: 92rpx;
        height: 2rpx;
        background: #FF9915;
        position: absolute;
        left: 0;
        bottom: 0;
}
.xq_dt .subtile {
        font-size: 18rpx;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #727888;
        line-height: 30rpx;
        margin-top: 24rpx;
}
image {
        width: 638rpx;
        /* margin: 58rpx auto; */
}
.kuans {
        width: 750rpx;
        height: 98rpx;
        background: #FFFFFF;
        box-shadow: 0rpx 5rpx 15rpx 0rpx rgba(13, 5, 9, 0.21);
        position: fixed;
        bottom: 0;
        left: 0;
        padding: 0 30rpx;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;
}
.kuans .l2 {
        font-size: 26rpx;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #FF1E48;
        line-height: 46rpx;
}
.kuans .l3 {

        font-size: 18rpx;
        font-family: Microsoft YaHei;
        font-weight: 400;
        text-decoration: line-through;
        color: #AFB1BB;
        line-height: 46rpx;
}
.bt {
        display: inline-block;
}
.bt1 {
        width: 160rpx;
        height: 48rpx;
        background: #FFFFFF;
        border: 1px solid #FF1E48;
        border-radius: 3rpx;
        font-size: 18rpx;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #FF1E48;
        line-height: 48rpx;
        text-align: center;
}
.bt2 {
        width: 160rpx;
        height: 48rpx;
        background: linear-gradient(-90deg, #FF1E48 0%, #FF2F82 100%);
        border: 1px solid #FF1E48;
        border-radius: 3rpx;
        font-size: 18rpx;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #ffffff;
        line-height: 48rpx;
        text-align: center;
        margin-left: 24rpx;
}