微信小程序實現選項卡的簡單實例

更新時間：2022年07月18日 15:48:17 作者：itfallrain

這篇文章主要介紹了微信小程序實現選項卡的簡單實例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了微信小程序實現選項卡的具體代碼，供大家參考，具體內容如下

效果圖

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

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" >
//注意這里只是寫了循環(huán)出來一條數據，要實現多條數據，要學會用數據嵌套循環(huán)哦~~
? <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;
}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: