微信小程序 --- 10行代码实现滑动tab切换

最新推荐文章于 2023-11-22 10:31:59 发布

豆i浆

最新推荐文章于 2023-11-22 10:31:59 发布

阅读量454

点赞数

分类专栏：微信小程序文章标签：微信小程序

本文链接：https://blog.csdn.net/sinat_19327991/article/details/79080712

版权

微信小程序专栏收录该内容

30 篇文章 3 订阅

订阅专栏

效果预览:

这里写图片描述
js部分：

Page({

  data: {
    arr: [1,2,3,4,5,6,7,8],
    index: 1
  },

  onLoad: function (options) {
    this.setData({
      childW: this.data.arr.length * 80
    });
  },

  tabOn: function (e) {
    this.setData({
      index: e.currentTarget.dataset.index + 1
    });
  }

})

wxtml部分：

<scroll-view scroll-x scroll-with-animation='true'>
  <view style='width: {{ childW }}px'>
    <block wx:for='{{ arr }}'>
      <view class='tab' catchtap='tabOn' data-index='{{ index }}'>{{ item }}</view>
    </block>
  </view>
</scroll-view>

<view class='content' wx:if='{{ index == 1 }}'>内容一</view>
<view class='content' wx:if='{{ index == 2 }}'>内容二</view>
<view class='content' wx:if='{{ index == 3 }}'>内容三</view>
<view class='content' wx:if='{{ index == 4 }}'>内容四</view>
<view class='content' wx:if='{{ index == 5 }}'>内容五</view>
<view class='content' wx:if='{{ index == 6 }}'>内容六</view>
<view class='content' wx:if='{{ index == 7 }}'>内容七</view>
<view class='content' wx:if='{{ index == 8 }}'>内容八</view>

wxss部分：

.tab{
  height: 50px;
  width: 80px;
  display: inline-block;
  text-align: center;
  line-height: 50px;
}

.tab:nth-child(odd){
  background-color: #ccc;
}

.content{
  width: 100%;
  height: 200px;
  text-align: center;
  line-height: 200px;
}