1、sticky/index.wxml
<!--pages/wxCase/sticky/index.wxml-->
<view class="head-title"></view>
<view class="hd {{isFixed && 'fixed'}}" id="nav">
<block wx:for="{{navList}}" wx:key="navList">
<view class="hd-item {{nav_type==index && 'active'}}" catchtap="changeType" data-index="{{index}}">{{item}}</view>
</block>
</view>
<view class="content {{isFixed && 'pt'}}" id='content'>
<block wx:for="{{nav_type==0?20:nav_type==1?0:40}}" wx:key="list">
<view>{{index+1}} </view>
</block>
</view>
2、sticky/index.js
// pages/wxCase/sticky/index.js
Page({
data: {
navList: ['正在进行', '即将开始', '已结束'],
nav_type: 0,//默认选中第一个数据
isFixed: false,//是否吸顶
navTop: 0,//nav菜单距离顶部距离
},
changeType(e) {
let { index } = e.currentTarget.dataset;
if (this.data.nav_type == index || index == undefined) return;
this.setData({
nav_type: index
})
if (this.data.isFixed) {
wx.pageScrollTo({
selector: '#content',
duration: 0.5//滚动动指定位置需要时间
})
}
},
onReady() {
// 获取节点距离顶部的距离
wx.createSelectorQuery().select("#nav").boundingClientRect((rect) => {
if (rect && rect.top) {
this.setData({
navTop: parseInt(rect.top)
})
}
}).exec()
},
// 监听页面滚动事件
onPageScroll(e) {
let scrollTop = parseInt(e.scrollTop),
isFixed = scrollTop >= this.data.navTop;
if (this.data.isFixed !== isFixed) {
this.setData({
isFixed
})
}
}
})
3、sticky/index.wxss
.head-title {
background: linear-gradient(to right, #ef629f, #eecda3);
height: 300rpx;
width: 100%;
box-sizing: border-box;
padding: 20rpx;
font-size: 25rpx;
color: #fff;
}
.hd {
width: 100%;
height: 88rpx;
line-height: 88rpx;
display: flex;
background: #fff;
box-shadow: 0 5rpx 5rpx #ccc;
position: relative;
}
.hd-item {
flex: 1;
text-align: center;
font-weight: 500;
color: #333;
font-size: 28rpx;
position: relative;
}
.hd-item::after {
content: '';
position: absolute;
/* 设置默认宽度为0 */
width: 0%;
height: 6rpx;
background: linear-gradient(to right, #ef629f, #eecda3);
border-radius: 3rpx;
left: 50%;
transform: translate(-50%);
bottom: 4rpx;
/* 添加过渡效果 */
transition: 0.3s width linear;
}
/* 激活选中样式 */
.hd-item.active {
font-size: 30rpx;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
background-image: linear-gradient(to right, #ef629f, #eecda3);
transition: 0.3s all linear;
transition-delay: 0.1s;
}
.hd-item.active::after {
width: 40%;
}
.content view {
background: #fff;
height: 50rpx;
line-height: 50rpx;
border-bottom: 1rpx solid #eaeef1;
padding: 20rpx;
color: #999;
text-align: center;
}
.content.pt {
padding-top: 88rpx;
/* nav的高度 */
}
.fixed {
position: fixed;
left: 0;
top: 0;
z-index: 1;
}
4、sticky/index.json
{
"usingComponents": {},
"navigationBarTitleText": "滚动吸顶"
}