效果图
实现的功能：点击上面选项卡，下面商品内容实现切换，滑动下面的商品页面，上面的选项也随页面进行切换。
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;}
