欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-02-12 16:12:15
本文实例为大家分享了微信小程序实现tab切换效果的具体代码,供大家参考,具体内容如下 效果图如下: (请自动忽视底部tab.....)   简单介绍一下:顶...

本文实例为大家分享了微信小程序实现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
}

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