美文网首页
微信小程序选项卡加轮播

微信小程序选项卡加轮播

作者: 养猫人_d545 | 来源:发表于2018-06-03 16:06 被阅读0次

//页面代码

<view class='swiper-list'>

<view class="swiper-list-Son{{currentTab==0?'active':' '}}"data-current="0" bindtap="clickTab">无极剑圣</view>

<view class="swiper-list-Son{{currentTab==0?'active':' '}}"data-current="0" bindtap="clickTab">疾风剑豪</view>

<view class="swiper-list-Son{{currentTab==0?'active':' '}}"data-current="0" bindtap="clickTab">德玛西亚</view>

</view>

<swiper current="{{currentTab}}"duration="300"bindchange="swiperTab">

<swiper-item><view>第一屏</view></swiper-item>

<swiper-item><view>第二屏</view></swiper-item>

<swiper-item><view>第三屏</view></swiper-item>

</swiper>

//js代码

var app=getApp()

Page({

  data:{

    currentTab:0  

},

  onLoad:function(options){    // 页面初始化 options为页面跳转所带来的参数  },

  //滑动切换  swiperTab:function( e ){   

        var that=this;

    that.setData({

      currentTba: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 

      }) 

    } 

  } 

})

//css代码

就不写了   既让都学小程序了  相信大家都已经对css烂熟于心了!!!!

相关文章

网友评论

      本文标题:微信小程序选项卡加轮播

      本文链接:https://www.haomeiwen.com/subject/etvjsftx.html