How to write the code of wechat applet implementation tab

This article mainly introduces “ How to write the code of wechat applet implementation tab ” Knowledge about , Xiaobian shows you the operation process through practical cases , The operation method is simple and fast , Practical , Hope this article “ How to write the code of wechat applet implementation tab ” The article can help you solve problems .

design sketch

Implemented function ： Click the tab above , The following product content is switched , Slide the product page below , The above options also switch with the page .

text.wxml：

<!--  classification  --><view class='listMiddle swiper-tab'>  <view class='middle {{currentTab==0? "action" : ""}}' data-current="0" bindtap="clickTab">     All   </view>  <view class='middle {{currentTab==1? "action":""}}' data-current="1" bindtap="clickTab">     classification 1  </view>  <view class='middle {{currentTab==2? "action":""}}' data-current="2" bindtap="clickTab">     classification 2  </view>  <view class='middle {{currentTab==3? "action":""}}' data-current="3" bindtap="clickTab">     classification 3  </view></view><!--  Selected goods  --><swiper current="{{currentTab}}" duration="300" bindchange="swiperTab" >// Note that there is only one piece of data written in the loop , To achieve multiple pieces of data , Learn to nest loops with data ~~  <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({  /**   *  Initial data of the page    */  data: {    jingxuan: [{      hua: "../../assets/hua.png", guo: "9.9 element 1 Jin explodes  - A Millennium virgin fruit ", zhigong: " Direct supply from the place of origin , About one box 8 Jin ", qi: "￥71.90", huo: "../../assets/huomiao.png", fen: " Purchased 999 Share ", xiaoche: "../../assets/xiaoche.png", },      {      hua: "../../assets/hua.png", guo: "9.9 element 1 Jin explodes  - A Millennium virgin fruit ", zhigong: " Direct supply from the place of origin , About one box 8 Jin ", qi: "￥72.90", huo: "../../assets/huomiao.png", fen: " Purchased 999 Share ", xiaoche: "../../assets/xiaoche.png", },      {      hua: "../../assets/hua.png", guo: "9.9 element 1 Jin explodes  - A Millennium virgin fruit ", zhigong: " Direct supply from the place of origin , About one box 8 Jin ", qi: "￥73.90", huo: "../../assets/huomiao.png", fen: " Purchased 999 Share ", xiaoche: "../../assets/xiaoche.png", },      {      hua: "../../assets/hua.png", guo: "9.9 element 1 Jin explodes  - A Millennium virgin fruit ", zhigong: " Direct supply from the place of origin , About one box 8 Jin ", qi: "￥74.90", huo: "../../assets/huomiao.png", fen: " Purchased 999 Share ", xiaoche: "../../assets/xiaoche.png", },    ],    currentTab: 0,  },  // Slide switch   swiperTab: function (e) {    var that = this;    that.setData({      currentTab: e.detail.current          });    console.log(e.detail.current)  },  // Click to switch   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

/*  classification  */.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;}/*  Select products begin  */.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;}

About “ How to write the code of wechat applet implementation tab ” That's all for , Thanks for reading . If you want to know more about the industry , You can pay attention to the Yisu cloud industry information channel , Xiaobian will update different knowledge points for you every day .