时间:2021-05-18
本文实例为大家分享了微信小程序实现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}以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
微信小程序swiper制作tab切换实现效果图:swiper制作tab切换index.htmlSeside1Seside2Seside3Seside1Sesid
微信小程序滚动Tab实现左右可滑动切换效果:最终效果如上。问题:1、tab标题总共8个,所以一屏无法全部显示。2、tab内容区左右滑动切换时,tab标题随即做标
微信小程序开发之顶部导航栏需求:顶部导航栏效果图:wxml:{{item}}tab_01tab_02tab_03wxss:page{display:flex;f
本文实例为大家分享了微信小程序顶部导航栏的具体代码,供大家参考,具体内容如下需求:顶部导航栏效果图:wxml:{{item}}tab_01tab_02tab_0
本文实例讲述了jquery实现的仿天猫侧导航tab切换效果。分享给大家供大家参考。具体如下:这里演示jquery实现仿天猫侧导航tab切换效果,引入外部JS,若