E企盈营销工具技术服务商 热线:4006-838-530

微信小程序tab切换

E企盈直播平台营销卖货系统

微信小程序开发中选项卡.在android中选项卡一般用fragment,到了小程序这里瞬间懵逼了.总算做出来了.分享出来看看.先看效果:再上代码:1.index.wxml[html] view plain copy!–index.wxml–  view class=”swiper-tab”      view class=”swiper-tab-list {{currentTab==0 ? ‘on’ : ”}}” data-current=”0″ bindtap=”swichNav”哈哈/view      view class=”swiper-tab-list {{currentTab==1 ? ‘on’ : ”}}” data-current=”1″ bindtap=”swichNav”呵呵/view      view class=”swiper-tab-list {{currentTab==2 ? ‘on’ : ”}}” data-current=”2″ bindtap=”swichNav”嘿嘿/view  /view    swiper current=”{{currentTab}}” class=”swiper-box” duration=”300″ style=”height:{{winHeight – 31}}px” bindchange=”bindChange”      !– 我是哈哈 —      swiper-item        view我是哈哈/view      /swiper-item      !– 我是呵呵 —      swiper-item        view我是呵呵/view      /swiper-item      !– 我是嘿嘿 —      swiper-item        view我是嘿嘿/view      /swiper-item  /swiper  2.index.wxss[css] view plain copy/**index.wxss**/  .swiper-tab{      width: 100%;      border-bottom: 2rpx solid #777777;      text-align: center;      line-height: 80rpx;}  .swiper-tab-list{  font-size: 30rpx;      display: inline-block;      width: 33.33%;      color: #777777;  }  .on{ color: #da7c0c;      border-bottom: 5rpx solid #da7c0c;}    .swiper-box{ display: block; height: 100%; width: 100%; overflow: hidden; }  .swiper-box view{      text-align: center;  }  3.index.js[javascript] view plain copy//index.js  //获取应用实例  var app = getApp()  Page( {    data: {      /**         * 页面配置         */      winWidth: 0,      winHeight: 0,      // tab切换      currentTab: 0,    },    onLoad: function() {      var that = this;        /**      * 获取系统信息 AD:【E企盈直播系统开发公司】E企盈系统专业开发:万商直播系统开发,直播系统,直播平台系统源码,小程序直播,商城版小程序,分销小程序,小程序定制,微分销,微商,微信分销,微信分销商城,微信分销系统,微信分销管理,微信分销平台,微商代理系统,E企盈是专业的直播小,E企盈是专业的直播小程序,公众号分销系统,营销系统,社群私域流量卖货系统技术开发商,热线:4006-838-530

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序tab切换
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏