简介： 项目中有一个功能，像今日头条小程序页面可以滑动切换，而且tab导航条也会跟着滚动，点击tab导航，页面滑动，切导航栏也会跟着滚动，就想着要怎么实现这个功能
效果
实现过程:
tab导航栏 <scroll-view>标签，内容使用<swiper>
复制代码wxml
<view class="containers">
<!-- tab导航栏 -->
<!-- scroll-left属性可以控制滚动条位置 -->
<!-- scroll-with-animation滚动添加动画过渡 -->
<scroll-view scroll-x="true" class="nav" scroll-left="{{navScrollLeft}}" scroll-with-animation="{{true}}">
<block wx:for="{{modleList}}" wx:for-index="idx" wx:for-item="navItem" wx:key="idx">
<view class="nav-items nav-item{{idx}} navitems{{idx}} {{currentTab == idx ?'active':''}}" data-current="{{idx}}" bindtap="switchNav">
<text class="text-title {{currentTab == idx?'selects':''}}">{{navItem.name}}</text>
</view>
</block>
</scroll-view>
<!-- 页面内容 -->
<swiper class="tab-box" current="{{currentTab}}" duration="300" bindchange="switchTab">
<swiper-item wx:for="{{modleList}}" wx:for-item="tabItem" wx:for-index="idx" wx:key="idx" class="tab-content" scroll-x='true' style="width:100%;">
<view class="c-list">
<block>
<view class="c-item model-item">
<image src="{{tabItem.urls}}"></image>
</view>
</block>
</view>
</swiper-item>
</swiper>
</view>
复制代码js
Page({
data: {
currentTab: 0,
navScrollLeft: 0,
modleList: [
{
"name": "模块一",
"urls": "http://img4.imgtn.bdimg.com/it/u=423551398,1303118808&fm=26&gp=0.jpg"
},
{
"name": "模块二",
"urls": "http://img2.imgtn.bdimg.com/it/u=3365093992,2526641564&fm=26&gp=0.jpg"
},
{
"name": "模块三",
"urls": "http://img0.imgtn.bdimg.com/it/u=2213244297,14939061&fm=26&gp=0.jpg"
},
{
"name": "模块四",
"urls": "http://img4.imgtn.bdimg.com/it/u=3762120152,4041020232&fm=26&gp=0.jpg"
},
{
"name": "模块五",
"urls": "http://img2.imgtn.bdimg.com/it/u=1889032813,1753990189&fm=26&gp=0.jpg"
},
{
"name": "模块六",
"urls": "http://img4.imgtn.bdimg.com/it/u=1435609199,2696310551&fm=26&gp=0.jpg"
},
]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
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
});
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function (e) {
},
})
复制代码css
/* page/home/home.wxss */
.containers{
margin-top: 300rpx;
}
.c-list{
display: flex;
}
.potion-list{
display: flex;
}
.c-item {
width:680rpx;
height: 410rpx;
position: relative;
color: #fff;
margin-bottom: 30rpx;
}
.nav {
height: 80rpx;
width: 100%;
box-sizing: border-box;
overflow: hidden;
line-height: 80rpx;
font-size: 16px;
white-space: nowrap;
color: #999;
margin-top: -50rpx;
display: flex;
padding: 0 30rpx;
}
.nav-items{
width: 18%;
display: inline-block;
text-align: center;
margin-left:0rpx;
}
.active{
color: #000;
font-weight: 700;
height: 60rpx;
}
.selects{
border-bottom: 3rpx solid red;
}
.tab-box{
width: 100vw;
height: 590rpx;
box-sizing: border-box;
}
.tab-content{
overflow-y: scroll;
display: flex;
justify-content: center;
padding-top: 20rpx;
margin-right: 20rpx;
}
.content{
overflow-y: scroll;
}
.codekongbai{
margin-top:200rpx;
display: block;
width: 100%;
overflow-y: scroll;
}
.model-item image{
width: 100%;
height: 100%;
border-radius: 20rpx;
}
复制代码
