微信小程序实现选项卡的简单实例
作者：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" >
//注意这里只是写了循环出来一条数据，要实现多条数据，要学会用数据嵌套循环哦~~
<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;
}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。