微信小程序wxs实现吸顶效果

2023-08-03 08:45:04 67

在.js文件中使用page的onPageScroll事件和scroll-view的scroll事件中产生卡顿(setData渲染会阻塞其它脚本执行，导致了整个用户交互的动画过程会有延迟)，所以使用wxs响应事件来实现吸顶效果。wxs响应事件基础库2.4.4开始支持，低版本需做兼容处理。

附上文档链接：wxs响应事件

吸顶效果

使用scroll-view组件实现滚动效果，页面和scroll-view组件的高度设成100%，当竖向滚动条大于等于导航到顶部距离时，导航变成固定定位，固定显示在顶部，反之，导航取消定位。






{{item}}

第{{index}}部分

/*wxss文件*/
page{
font-size:30rpx;
background:#fea;
height:100%;
}
.div{
width:100%;height:500rpx;
}
.nav-image{
width:100%;height:400rpx;
vertical-align:middle;
}
.navigation{
width:100%;
height:100rpx;
display:flex;
justify-content:center;
align-items:center;
background:#fff;
top:0;left:0;/*只有使用定位才起效果*/
}
.navigationview{
padding:15rpx20rpx;
margin:020rpx;
}

//wxs文件
varscrollEvent=function(e,ins){
varscrollTop=e.detail.scrollTop;
varnavTop=e.currentTarget.dataset.top;
if(scrollTop>=navTop){
ins.selectComponent('.navigation').setStyle({
"position":'fixed'
})
}else{
ins.selectComponent('.navigation').setStyle({
"position":'static'
})
}
}
module.exports={
scrollEvent:scrollEvent
}

//js文件
Page({
/**
*页面的初始数据
*/
data:{
navBarList:['喜欢','点赞','收藏'],
navTop:0,//导航距顶部距离
},
/**
*生命周期函数--监听页面加载
*/
onLoad:function(options){
this.getNavTop();
},
/**
*获取导航距顶部距离
*/
getNavTop(){
varthat=this;
varquery=wx.createSelectorQuery();
query.select('.navigation').boundingClientRect(function(data){
that.setData({
navTop:data.top,
})
}).exec();
},
})

渐变导航效果

当竖向滚动条滚动到指定位置时，出现导航条，导航条透明度也随滚动条位置发生变化。











我是导航条


第{{index}}部分

/*wxss文件*/
page{font-size:30rpx;background:rgba(200,58,57,0.3);height:100%;}
.div{width:100%;height:500rpx;}
.nav-image{width:100%;height:400rpx;vertical-align:middle;}
.nav-icon,.nav-bar{
position:fixed;
top:0;left:0;
height:120rpx;
}
.nav-bar{
width:100%;
display:flex;
align-items:center;
background:#fff;
}
.back-icon{
width:100rpx;
height:100%;
display:flex;
justify-content:center;
align-items:center;
}
.back-icon::after{/*利用伪类元素模拟出返回icon*/
content:"";
display:block;
width:25rpx;height:25rpx;
border-top:5rpxsolid#fff;
border-left:5rpxsolid#fff;
transform:rotate(-45deg);
}
.nav-bar.back-icon::after{border-color:#000;}

//wxs文件
varscrollEvent=function(e,ins){
varscrollTop=e.detail.scrollTop;
if(scrollTop>100){
ins.selectComponent(".nav-icon").setStyle({
"opacity":"0"
})
vardot=(scrollTop-100)/50;
ins.selectComponent(".nav-bar").setStyle({
"opacity":dot
})
}else{
ins.selectComponent(".nav-bar").setStyle({
"opacity":"0"
})
vardot=(100-scrollTop)/50;
ins.selectComponent(".nav-icon").setStyle({
"opacity":dot
})
}
};
module.exports={
scrollEvent:scrollEvent
};

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

微信小程序wxs实现吸顶效果

热门推荐

随机推荐