小程序横向左右滑动

最新推荐文章于 2024-07-16 10:04:01 发布

前端开发小吴

最新推荐文章于 2024-07-16 10:04:01 发布

阅读量203

点赞数

文章标签：小程序

原文链接：https://blog.csdn.net/beerfeng/article/details/80884467

版权

  <scroll-view class="tab-list" scroll-x scroll-with-animation>
    <view wx:for="{{tabList}}" class="tab-item {{curTab===index ? 'selected-tab':''}}" data-index="{{index}}" bindtap="selectTab">{{item.name}}</view>
  </scroll-view>
  <swiper current="{{current}}" bindchange="swiperChange">
    <block wx:for="{{tabList}}">
      <swiper-item>{{item.name}}</swiper-item>
    </block>
  </swiper>

.tab-list {
width: 100%;
height: 88rpx;
border-bottom: 1rpx solid #e5e5e5;
display: inline-block;
white-space: nowrap;
 
}
 
.tab-item {
width: 140rpx;
height: 85rpx;
display: inline-block;
line-height: 85rpx;
vertical-align: middle;
text-align: center;
}
 
.selected-tab {
color: #1aae18;
border-bottom: 5rpx solid #1aae18;
}

// data 数据
	curTab: 0,
    current: 0,
    tabList: [{
        id: 1,
        name: "分类"
      },
      {
        id: 2,
        name: "推荐"
      },
      {
        id: 3,
        name: "精品"
      }, {
        id: 4,
        name: "直播"
      },
      {
        id: 5,
        name: "广播"
      },
      {
        id: 6,
        name: "其他"
      }
    ]
selectTab(e) {
    let index = e.target.dataset.index;
    this.setData({
      curTab: index,
      current: index
    })
  },
  swiperChange(e) {
    let index = e.detail.current;
    this.setData({
      curTab: index,
      current: index
    })
  },