微信小程序实现滴滴导航tab切换效果


            本文实例为大家分享了微信小程序实现tab切换效果的具体代码，供大家参考，具体内容如下

效果图如下： (请自动忽视底部tab.....)

 

简单介绍一下：顶部导航使用 scroll-view 组件 中间的内容部分使用 swiper 组件

实现的逻辑就是： 先这样在这样，这样然后那样。（此处省略200个字）。

代码如下，复制可用

wxml







 <view class="contain">

 <!-- 导航栏 -->

 <scroll-view class="tab" scroll-x scroll-left="{{tabScroll}}" scroll-with-animation="true">

  <block wx:for="{{menuList}}" wx:key="index">

   <view class="tab-item {{currentTab == index ? 'active' : ''}}" data-current="{{index}}" bindtap='clickMenu'>{{item.name}}</view>

  </block>

 </scroll-view>

 <!-- 页面 -->

 <swiper class="content" style='height: {{height}}px' duration="1000" current="{{currentTab}}" bindchange="changeContent">

  <swiper-item class="content-item" wx:for="{{menuList}}" wx:key="index">这里是{{item.name}}</swiper-item>

 </swiper>

</view>



js







Page({

 data: {

  menuList: [{

   name: "快车"

  }, {

   name: "顺风车"

  }, {

   name: "外卖"

  }, {

   name: "单车"

  }, {

   name: "礼橙专车"

  }, {

   name: "出租车"

  }, {

   name: "公交"

  }, {

   name: "代驾"

  }, {

   name: "豪华车"

  }, {

   name: "自驾租车"

  }, {

   name: "拼车"

  }, {

   name: "二手车"

  }],

  tabScroll: 0,

  currentTab: 0,

  windowHeight: '',

  windowWidth: ''

 },

 onLoad: function() { 

  wx.getSystemInfo({   // 获取当前设备的宽高，文档有

   success: (res) => { 

    this.setData({

     windowHeight: res.windowHeight,

     windowWidth: res.windowWidth

    })

   },

  })

 },

 onReady: function() {

  wx.setNavigationBarTitle({  //修改标题文字

   title: ''

  })

 },

 clickMenu: function(e) {

  var current = e.currentTarget.dataset.current //获取当前tab的index

  var tabWidth = this.data.windowWidth / 5 // 导航tab共5个，获取一个的宽度

  this.setData({

   tabScroll: (current - 2) * tabWidth //使点击的tab始终在居中位置

  }) 

  if (this.data.currentTab == current) {

   return false

  } else {

   this.setData({currentTab: current })

  }

 },

 changeContent: function(e) {

  var current = e.detail.current  // 获取当前内容所在index,文档有

  var tabWidth = this.data.windowWidth / 5 

  this.setData({

   currentTab: current,

   tabScroll: (current - 2) * tabWidth

  })

 }

})



css 





.contain{

 width: 100%;

 height: 100%;

}

.tab{

 width: 100%;

 height: 100rpx;

 position: fixed;

 top: 0;

 left: 0;

 z-index: 100;

 white-space: nowrap;

 box-sizing: border-box;

 overflow: hidden;

 line-height: 100rpx;

 

}

.tab-item{

 display: inline-block;

 width: 20%;

 text-align: center;

 font-size: 14px;

 color: #8f9193;

}

.active{

 color: #ff502c

}

.content{

 padding-top: 100rpx;

 box-sizing: border-box;

 text-align: center;

 font-size: 14px;

}

.content-item{

 overflow-y: scroll

}



以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持中文源码网。