微信小程序實現選項卡的代碼怎么寫

這篇文章主要介紹“微信小程序實現選項卡的代碼怎么寫”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“微信小程序實現選項卡的代碼怎么寫”文章能幫助大家解決問題。

效果圖

實現的功能：點擊上面選項卡，下面商品內容實現切換，滑動下面的商品頁面，上面的選項也隨頁面進行切換。

text.wxml：

<!-- 分類 -->
<view class='listMiddle swiper-tab'>
  <view class='middle {{currentTab==0? "action" : ""}}' data-current="0" bindtap="clickTab">
    全部
  </view>
  <view class='middle {{currentTab==1? "action":""}}' data-current="1" bindtap="clickTab">
    分類1
  </view>
  <view class='middle {{currentTab==2? "action":""}}' data-current="2" bindtap="clickTab">
    分類2
  </view>
  <view class='middle {{currentTab==3? "action":""}}' data-current="3" bindtap="clickTab">
    分類3
  </view>
</view>
<!-- 精選商品 -->
<swiper current="{{currentTab}}" duration="300" bindchange="swiperTab" >
//注意這里只是寫了循環出來一條數據，要實現多條數據，要學會用數據嵌套循環哦~~
  <swiper-item wx:for="{{jingxuan}}">
    <view class='loopmiddle'>
      <view class='lo-left'>
        <image src='{{item.hua}}'></image>
      </view>
      <view class='lo-middle'>
        <view>{{item.guo}}</view>
        <view>{{item.zhigong}}</view>
        <view class='loo-bottom'>
          <text>{{item.qi}}</text>
          <image src='{{item.huo}}'></image>
          <text>{{item.fen}}</text>
        </view>
      </view>
      <view class='lo-right'>
        <image src='{{item.xiaoche}}'></image>
      </view>
    </view>
  </swiper-item>
</swiper>

test.js

var app = getApp()
Page({

  /**
   * 頁面的初始數據
   */
  data: {
    jingxuan: [{
      hua: "../../assets/hua.png", guo: "9.9元1斤驚爆價 - A級千禧圣女果", zhigong: "產地直供，一箱約8斤", qi: "￥71.90", huo: "../../assets/huomiao.png", fen: "已購999份", xiaoche: "../../assets/xiaoche.png", },
      {
      hua: "../../assets/hua.png", guo: "9.9元1斤驚爆價 - A級千禧圣女果", zhigong: "產地直供，一箱約8斤", qi: "￥72.90", huo: "../../assets/huomiao.png", fen: "已購999份", xiaoche: "../../assets/xiaoche.png", },
      {
      hua: "../../assets/hua.png", guo: "9.9元1斤驚爆價 - A級千禧圣女果", zhigong: "產地直供，一箱約8斤", qi: "￥73.90", huo: "../../assets/huomiao.png", fen: "已購999份", xiaoche: "../../assets/xiaoche.png", },
      {
      hua: "../../assets/hua.png", guo: "9.9元1斤驚爆價 - A級千禧圣女果", zhigong: "產地直供，一箱約8斤", qi: "￥74.90", huo: "../../assets/huomiao.png", fen: "已購999份", xiaoche: "../../assets/xiaoche.png", },
    ],
    currentTab: 0,
  },

  //滑動切換
  swiperTab: function (e) {
    var that = this;
    that.setData({
      currentTab: e.detail.current
      
    });
    console.log(e.detail.current)
  },
  //點擊切換
  clickTab: function (e) {

    var that = this;

    if (this.data.currentTab === e.target.dataset.current) {
      return false;
    } else {
      that.setData({
        currentTab: e.target.dataset.current
      })
    }
  } ,

text.wxss

/* 分類 */
.listMiddle{
  display: flex;
  font-size: 40rpx;
  border-bottom: 1px solid #ebebeb;
  height: 90rpx;
  line-height: 90rpx;
 
}
.middle{
   margin-left: 60rpx; 
   height: 90rpx;
   width: 120rpx;

}


.action{
  height: 90rpx;
  width: 120rpx;
  color: #3ad965;
  border-bottom:2px solid #3ad965;
}
/* 精選商品開始 */
.loopmiddle{
   width: 690rpx;
  margin: 5rpx auto 0;
  /* overflow: hidden; */
  display: flex;
  margin-bottom: 40rpx;
  border-bottom: 1rpx solid #eff0f4;
}

.lo-left{
  /* float: left; */
  height: 250rpx;
  width: 250rpx;
}
.lo-left image{
  height: 250rpx;
  width: 250rpx;
}
.lo-middle{
  margin-top:40rpx;
}
.lo-middle view:nth-child(1){
  font-size:25rpx;
  color:#676767;
  margin-left: 10rpx;

}
.lo-middle view:nth-child(2){
  font-size:20rpx;
  color:#adadad;
  margin-top:20rpx;
  margin-left: 10rpx;


}
.loo-bottom{
  margin-top: 40rpx;
}
.loo-bottom text:nth-child(1){
  margin-right: 15rpx;
  font-size:40rpx;
  color:#fe6400;

}
.loo-bottom text:last-child{
  font-size:20rpx;
  color:#4b3333;

}
.loo-bottom image{
  width: 35rpx;
  height: 35rpx;
  vertical-align: middle;
}
.lo-right{
  width: 50rpx;
  height: 50rpx;
}
.lo-right image{
   width: 50rpx;
  height: 50rpx;
}
.lo-right{
  margin-top:170rpx;
}
.active{
  color:aqua;
  border-bottom: 4rpx solid red;
}
.swiper-tab{
  width: 100%;
  border-bottom: 2rpx solid #ccc;
  text-align: center;
  height: 88rpx;
  line-height: 88rpx;
  font-weight: bold;
}

關于“微信小程序實現選項卡的代碼怎么寫”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。