微信小程序tab切换可滑动切换导航栏跟随滚动实现代码
71 浏览量
2020-11-30
22:24:43
上传
评论 1
收藏 73KB PDF 举报
微信小程序微信小程序tab切换可滑动切换导航栏跟随滚动实现代码切换可滑动切换导航栏跟随滚动实现代码
简介简介
看到今日头条小程序页面可以滑动切换，而且tab导航条也会跟着滚动，点击tab导航，页面滑动，切导航栏也会跟着滚动，就
想着要怎么实现这个功能
像商城类商品类目如果做成左右滑动切换类目用户体验应该会好很多，我这里只是一个小demo，没有怎么去考虑数据的问
题，主要是想着去实现这么个功能，有可能后期引入数据后会出现问题，欢迎提出互相讨论
解决过程解决过程
1.在想要实现这个问题的时候找了不少别人的博客看，主体页面布局方面是比较统一的，tab导航栏使用<scroll-view>标签，内
容使用<swiper>，其中的使用方法和参数希望自行参考api文档，不过多解释
布局代码如下：
wxml
<view class="container">
<!-- tab导航栏 -->
<!-- scroll-left属性可以控制滚动条位置 -->
<!-- scroll-with-animation滚动添加动画过渡 -->
<scroll-view scroll-x="true" class="nav" scroll-left="{{navScrollLeft}}" scroll-with-animation="{{true}}">
<block wx:for="{{navData}}" wx:for-index="idx" wx:for-item="navItem" wx:key="idx">
<view class="nav-item {{currentTab == idx ?'active':''}}" data-current="{{idx}}" bindtap="switchNav">{{navItem.text}}</view>
</block>
</scroll-view>
<!-- 页面内容 -->
<swiper class="tab-box" current="{{currentTab}}" duration="300" bindchange="switchTab">
<swiper-item wx:for="{{[0,1,2,3,4,5,6,7,8]}}" wx:for-item="tabItem" wx:for-index="idx" wx:key="idx" class="tab-content">
{{tabItem}}
</swiper-item>
</swiper>
</view>
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{
资源评论
weixin_38703123
- 粉丝: 3
- 资源: 944
