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

发布时间：2020-12-14 20:05:39 所属栏目：资源来源：网络整理

导读：本文实例为大家分享了微信小程序实现tab切换效果的具体代码，供大家参考，具体内容如下效果图如下： (请自动忽视底部tab.....) 简单介绍一下：顶部导航使用 scroll-view 组件中间的内容部分使用 swiper 组件实现的逻辑就是：先这样在这样，这样然后那样

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

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

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

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

代码如下，复制可用

wxml

{ 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

}
.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
}

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!