微信小程序实现选项卡的简单实例_javascript技巧_

        全部           分类1           分类2           分类3    //注意这里只是写了循环出来一条数据，要实现多条数据，要学会用数据嵌套循环哦~~                                               {{item.guo}}         {{item.zhigong}}                    {{item.qi}}                      {{item.fen}}                                               

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       })     }   } ,

/* 分类 */ .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; }