小程序tab切换效果展示

最新推荐文章于 2024-04-04 23:27:58 发布

原创最新推荐文章于 2024-04-04 23:27:58 发布 · 772 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#tab切换 #小程序tab切换 #swiper实现tab切换

小程序tab切换专栏收录该内容

2 篇文章

订阅专栏

看了小程序的开发文档，里面几乎没有介绍tab的框架，真不知道如何下手，参考了几个博主的文档，我这里修改了下，预览图我就不上了，太麻烦

wxml前端代码：

<view class='swiper-tab'>
  <block wx:for="{{tabName}}">
    <view class="swiper-tab-item {{currentTab == index?'active':''}}" data-current="{{index}}" bindtap="clickTab">{{item}}</view>
  </block>
</view>

<swiper current='{{currentTab}}' duration='300' bindchange='swiperTab'>
  <block wx:for="{{tabName}}">
    <swiper-item>
      <navigator url='../info/info?id={{item.id}}' wx:for="{{list}}" wx:key="*this">
        <view class='newstype-item'>
          <image src='{{item.litpic}}' class='pic' mode='aspectFill'></image>
          <view class='newstype-item-right'>
            <text class='newstype-item-maintext'>{{item.title}}</text>
            <view class='newstype-item-bottom'>
              <text class='newstype-item-smalltext'>{{item.time}}</text>
              <view class='newstype-item-bottom-right'>
                <image src="/images/icon_look.png" style="width:34rpx;height:34rpx"></image>
                <view class='newstype-item-smalltext' style="margin-left:10rpx;  font-size: 20rpx; margin-bottom:1rpx">{{item.click}}</view>
              </view>
            </view>
          </view>
        </view>
      </navigator>
    </swiper-item>
  </block>
</swiper>

js代码：

Page({

  /**
   * 页面的初始数据
   */
  data: {
    tabName: ['中医药膳', '中医方剂', '中医养生', '中医常识'],
    currentTab: 0,
    list: [{
      "id": 7,
      "title": "秋天吃南瓜很养生 秋天应该怎么吃南瓜",
      "litpic": "http:\/\/www.zhongyi.com\/uploads\/ab1\/20181024\/b9b156d31d6d53a99b835a110acb2368.jpg",
      "publishtime": 1540365336,
      "click": 73,
      "time": "2018-10-24"
    }, {
      "id": 6,
      "title": "风热感冒怎么办 来碗金银花山楂汤",
      "litpic": "http:\/\/www.zhongyi.com\/uploads\/ab1\/20181024\/961bc91a8df96601995891b5203e1a1c.jpg",
      "publishtime": 1540365288,
      "click": 56,
      "time": "2018-10-24"
    }, {
      "id": 5,
      "title": "每天坚持吃一碗粥 气色更红润",
      "litpic": "http:\/\/www.zhongyi.com\/uploads\/ab1\/20181024\/e610f6b4fa82e63ca69dcf2d2f580850.jpg",
      "publishtime": 1540365219,
      "click": 45,
      "time": "2018-10-24"
    }, {
      "id": 4,
      "title": "4道养生粥 清热润燥缓解疲劳",
      "litpic": "http:\/\/www.zhongyi.com\/uploads\/ab1\/20181024\/45f5ee0f9512cb8da555a623efacfd41.jpg",
      "publishtime": 1540365158,
      "click": 54,
      "time": "2018-10-24"
    }, {
      "id": 3,
      "title": "中医抗皱药膳方 帮你击退皱纹",
      "litpic": "http:\/\/www.zhongyi.com\/uploads\/ab1\/20181024\/4d40bf8acbc5ccf66415200f3605c28a.jpg",
      "publishtime": 1540365097,
      "click": 45,
      "time": "2018-10-24"
    }, {
      "id": 2,
      "title": "三伏天如何饮食养生 不可错过这些药膳方",
      "litpic": "http:\/\/www.zhongyi.com\/uploads\/ab1\/20181024\/8e7bbb0ae96b2dee96d71acb9de80601.jpg",
      "publishtime": 1540365010,
      "click": 72,
      "time": "2018-10-24"
    }, {
      "id": 1,
      "title": "黄芪功效虽好 这七种人服用需谨慎",
      "litpic": "http:\/\/www.zhongyi.com\/uploads\/ab1\/20181024\/8069266e81f4222afe0859faa0ffcf5e.jpg",
      "publishtime": 1540364900,
      "click": 76,
      "time": "2018-10-24"
    }]
  },
  //滑动切换
  swiperTab: function(e) {
    this.setData({
      currentTab: e.detail.current
    })
  },
  //点击切换
  clickTab: function(e) {
    console.log(e)
    if (this.data.currentTab === e.target.dataset.current) {
      return false
    } else {
      this.setData({
        currentTab: e.target.dataset.current
      })
    }
  },
})

wxss代码：

.swiper-tab {
  width: 100%;
  background-color: #fff;
  border-bottom: 2rpx solid #ccc;
  text-align: center;
  height: 88rpx;
  display: flex;
  flex-flow: row;
  justify-content: space-between;
}

.swiper-tab-item {
  width: 30%;
  color: #434343;
  line-height: 88rpx;
}

.active {
  color: #f65959;
  border-bottom: 4rpx solid #f65959;
}

swiper {
  height: 100%;
  padding: 10rpx;
  background: #fff;
}

.newstype-list {
  display: flex;
  flex-direction: column;
}

.newstype-item {
  display: flex;
  flex-direction: row;
  margin-top: 2rpx;
  width: 750rpx;
  height: 194rpx;
  justify-content: flex-start;
  border-bottom: 1px solid #d8d8d8;
}

.newstype-item .pic {
  width: 220rpx;
  height: 160rpx;
  margin: 17rpx 0 0 20rpx;
}

.newstype-item-right {
  margin-top: 17rpx;
  display: flex;
  flex-direction: column;
  margin-left: 30rpx;
  width: 460rpx;
  height: 160rpx;
  justify-content: space-between;
}

.newstype-item-maintext {
  font-size: 28rpx;
}

.newstype-item-bottom {
  background: #fff;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
}

.newstype-item-bottom-right {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.newstype-item-smalltext {
  display: flex;
  color: #999;
  font-size: 25rpx;
}

转载请注明出处