这篇文章给大家分享的是有关微信小程序如何实现tab切换可滑动切换导航栏跟随滚动的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
成都创新互联公司服务项目包括万荣网站建设、万荣网站制作、万荣网页制作以及万荣网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，万荣网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到万荣省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！
解决过程
1.在想要实现这个问题的时候找了不少别人的博客看，主体页面布局方面是比较统一的，tab导航栏使用标签，内容使用，其中的使用方法和参数希望自行参考api文档，不过多解释
布局代码如下：
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切换可滑动切换导航栏跟随滚动”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
网站栏目：微信小程序如何实现tab切换可滑动切换导航栏跟随滚动
URL标题：
http://bjjierui.cn/article/jddjeh.html
