重庆分公司,新征程启航
为企业提供网站建设、域名注册、服务器等服务
这篇文章给大家分享的是有关微信小程序如何实现tab切换可滑动切换导航栏跟随滚动的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
成都创新互联公司服务项目包括万荣网站建设、万荣网站制作、万荣网页制作以及万荣网络营销策划等。多年来,我们专注于互联网行业,利用自身积累的技术优势、行业经验、深度合作伙伴关系等,向广大中小型企业、政府机构等提供互联网行业的解决方案,万荣网站推广取得了明显的社会效益与经济效益。目前,我们服务的客户以成都为中心已经辐射到万荣省份的部分城市,未来相信会继续扩大服务区域并继续获得客户的支持与信任!
解决过程
1.在想要实现这个问题的时候找了不少别人的博客看,主体页面布局方面是比较统一的,tab导航栏使用
布局代码如下:
wxml
{{navItem.text}} {{tabItem}}
wxss
/**index.wxss**/ page{ width: 100%; height: 100%; } .container{ width: 100%; height: 100%; } .nav { height: 80rpx; width: 100%; box-sizing: border-box; overflow: hidden; line-height: 80rpx; background: #f7f7f7; font-size: 16px; white-space: nowrap; position: fixed; top: 0; left: 0; z-index: 99; } .nav-item { width: 20%; display: inline-block; text-align: center; } .nav-item.active{ color: red; } .tab-box{ background: greenyellow; padding-top: 80rpx; height: 100%; box-sizing: border-box; } .tab-content{ overflow-y: scroll; }
js
//index.js //获取应用实例 const app = getApp() Page({ data: { motto: 'Hello World', userInfo: {}, hasUserInfo: false, canIUse: wx.canIUse('button.open-type.getUserInfo'), navData:[ { text: '首页' }, { text: '健康' }, { text: '情感' }, { text: '职场' }, { text: '育儿' }, { text: '纠纷' }, { text: '青葱' }, { text: '上课' }, { text: '下课' } ], currentTab: 0, navScrollLeft: 0 }, //事件处理函数 onLoad: function () { if (app.globalData.userInfo) { this.setData({ userInfo: app.globalData.userInfo, hasUserInfo: true }) } else if (this.data.canIUse) { // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回 // 所以此处加入 callback 以防止这种情况 app.userInfoReadyCallback = res => { this.setData({ userInfo: res.userInfo, hasUserInfo: true }) } } else { // 在没有 open-type=getUserInfo 版本的兼容处理 wx.getUserInfo({ success: res => { app.globalData.userInfo = res.userInfo this.setData({ userInfo: res.userInfo, hasUserInfo: true }) } }) } wx.getSystemInfo({ success: (res) => { this.setData({ pixelRatio: res.pixelRatio, windowHeight: res.windowHeight, windowWidth: res.windowWidth }) }, }) }, switchNav(event){ var cur = event.currentTarget.dataset.current; //每个tab选项宽度占1/5 var singleNavWidth = this.data.windowWidth / 5; //tab选项居中 this.setData({ navScrollLeft: (cur - 2) * singleNavWidth }) if (this.data.currentTab == cur) { return false; } else { this.setData({ currentTab: cur }) } }, switchTab(event){ var cur = event.detail.current; var singleNavWidth = this.data.windowWidth / 5; this.setData({ currentTab: cur, navScrollLeft: (cur - 2) * singleNavWidth }); } })
页面代码如上面三部分,可以直接新建一项目进行测试
效果图如下
注意事项
在处理顶部tab导航跟随底部页面滑动的时候遇到一个问题,就是在给<scroll-view>
中的scrll-left赋值的时候遇到的问题
逻辑上讲初始时tab导航下标小于2时导航栏不滚动,当大于2时向左滑动,以使被选中的导航栏居中,但是当最左侧的选项因为左滑看不到后,我又点击左侧选项希望导航往右滑动,能够看到左边的导航,按上面的js代码计算scroll-left会产生负值,但是scroll-left即使为负值,但是滚动条不会向左缩进去,所以即使为负值,相当于为0,当时做的时候一直在思考这个怎么用逻辑解决,想着要写各种判断,计算距离,结果到最后一句代码直接赋值就搞定了,也是很无语。
感谢各位的阅读!关于“微信小程序如何实现tab切换可滑动切换导航栏跟随滚动”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!