微信小程序实战之仿android fragment可滑动底部导航栏（4）

<swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight - 51}}px" bindchange="bindChange">   <!-- frag01 -->  <swiper-item>  <scroll-view class="hot-box" scroll-y="true" upper-threshold="50" lower-threshold="100" bindscrolltolower="scrolltolower">    <!-- 列表 -->   <view class="themes-list">   <view class="themes-list-box" wx:for="{{datalists}}">    <view class="themes-list-main">    <view class="themes-list-name">{{item}}</view>    </view>   </view>   </view>  </scroll-view>  </swiper-item>   <!-- grag02 -->  <swiper-item>  <scroll-view class="hot-box" scroll-y="true" upper-threshold="50" lower-threshold="100" bindscrolltolower="scrolltolower">    <!-- 列表 -->   <view class="themes-list">   <view class="themes-list-box" wx:for="{{reslists}}">    <view class="themes-list-main">    <view class="themes-list-name">{{item}}</view>    </view>   </view>   </view>  </scroll-view>  </swiper-item>   <!-- grag03 -->  <swiper-item>  <scroll-view class="hot-box" scroll-y="true" upper-threshold="50" lower-threshold="100" bindscrolltolower="scrolltolower">    <!-- 列表 -->   <view class="themes-list">   <view class="themes-list-box" wx:for="{{datalists}}">    <view class="themes-list-main">    <view class="themes-list-name">{{item}}</view>    </view>   </view>   </view>  </scroll-view>  </swiper-item>   <!-- grag02 -->  <swiper-item>  <scroll-view class="hot-box" scroll-y="true" upper-threshold="50" lower-threshold="100" bindscrolltolower="scrolltolower">    <!-- 列表 -->   <view class="themes-list">   <view class="themes-list-box" wx:for="{{reslists}}">    <view class="themes-list-main">    <view class="themes-list-name">{{item}}</view>    </view>   </view>   </view>  </scroll-view>  </swiper-item> </swiper>  <!--tab_top--> <view class="swiper-tab">  <view class="swiper-tab-list {{currentTab==0 ? 'active' : ''}}" data-current="0" bindtap="swichNav">  <view class="swiper-tab-img"><image class="img" src="{{currentTab==0 ? iconlists[0].focus: iconlists[0].normal}}"></image></view>  <view>frag01</view>  </view>  <view class="swiper-tab-list {{currentTab==1 ? 'active' : ''}}" data-current="1" bindtap="swichNav">   <view class="swiper-tab-img"><image class="img" src="{{currentTab==1 ? iconlists[1].focus: iconlists[1].normal}}"></image></view>  <view>frag02</view>  </view>  <view class="swiper-tab-list {{currentTab==2 ? 'active' : ''}}" data-current="2" bindtap="swichNav">   <view class="swiper-tab-img"><image class="img" src="{{currentTab==2 ? iconlists[2].focus: iconlists[2].normal}}"></image></view>  <view>frag03</view>  </view>  <view class="swiper-tab-list {{currentTab==3 ? 'active' : ''}}" data-current="3" bindtap="swichNav">   <view class="swiper-tab-img"><image class="img" src="{{currentTab==3 ? iconlists[3].focus: iconlists[3].normal}}"></image></view>  <view>frag04</view>  </view> </view> 

/*swiper*/ .swiper-box {  display: block;  height: 100%;  width: 100%;  overflow: hidden; } .hot-box {  display: block;  height: 100%;  font-family: Helvetica; } /* list */ .themes-list {  background: #fff;  display: block;  margin-bottom: 20px; } .themes-list-box {  display: block;  position: relative;  padding: 16px 20px;  border-bottom: 1px solid #f2f2f2; } .themes-list-main {  margin-left: 1px; } .themes-list-name {  font-size: 14px;  color: #444;  height: 20px;  line-height: 20px;  overflow: hidden; } /*tab*/ .swiper-tab {  height: 50px;  background: #fff;  display: flex;  position: relative;  z-index: 2;  flex-direction: row;  justify-content: center;  align-items: center;  border-top: 1px solid #ccc; } .swiper-tab-list {  margin: 0 20px;  padding: 0 4px;  font-size: 28rpx;  font-family: Helvetica; } .active {  /*border-bottom: 1px solid #FFCC00;*/  color: #FFCC00; } .swiper-tab-img {  text-align: center; } .img {  width:23px;  height: 23px; } 

Page( {  data: {   winWidth: 0,   winHeight: 0,   currentTab: 0,     datalists : [     "习近平主持中央财经领导小组第十五次会议",     "李克强打叉的“万里审批图”成历史",     "新疆自治区举行反恐维稳誓师大会",     "朝鲜代表团抵达马来西亚处理金正男遇害案",     "习近平主持中央财经领导小组第十五次会议",     "李克强打叉的“万里审批图”成历史",     "新疆自治区举行反恐维稳誓师大会",     "砸锅卖铁！索尼是在走向毁灭 还是在奔向新生？"   ],   reslists:["hello","thank you for your read","if u feel good","can u give me good？"],   iconlists:[    {normal:"../../images/wp.png",focus:"../../images/wpselect.png"},    {normal:"../../images/ss.png",focus:"../../images/ssselect.png"},    {normal:"../../images/hc.png",focus:"../../images/hcselect.png"},    {normal:"../../images/my.png",focus:"../../images/myselect.png"},   ]  },  onLoad: function( options ) {   var that = this;   //获取系统信息   wx.getSystemInfo( {    success: function( res ) {     that.setData( {      winWidth: res.windowWidth,      winHeight: res.windowHeight     });    }   });  },  /**   * 滑动切换tab   */  bindChange: function( e ) {   var that = this;   that.setData( { currentTab: e.detail.current });  },  /**   * 点击切换tab   */  swichNav: function( e ) {   console.log(e)   var that = this;   if( this.data.currentTab === e.currentTarget.dataset.current ) {    //点击的是同一个，则不操作    return false;   } else {    that.setData( {     currentTab: e.currentTarget.dataset.current    })   }   } })