在。js文件中使用页面的onPageScroll事件和滚动视图的滚动事件中产生卡顿(setData渲染会阻塞其它脚本执行,导致了整个用户交互的动画过程会有延迟),所以使用wxs响应事件来实现吸顶效果.wxs响应事件基础库2.4.4开始支持,低版本需做兼容处理。
附上文档链接:wxs响应事件
<>强吸顶效果
使用滚动视图组件实现滚动效果,页面和滚动视图组件的高度设成100%,当竖向滚动条大于等于导航到顶部距离时,导航变成固定定位,固定显示在顶部,反之,导航取消定位。
& lt; !- - - wxml文件——比;
& lt; wxs模块=" scroll1 " src=" https://www.yisu.com/zixun/scroll1.wxs "祝辞& lt;/wxs>& lt; !——引入wxs文件——比;
& lt;滚动视图bindscroll=" {{scroll1。scrollEvent}} {{navTop}}“data-top==风格的高度:100%;scroll-y>
& lt;图像src=" https://www.yisu.com/images/top_image.png "模式=癮spectFill”class=皀av-image”祝辞& lt;/image>
& lt;视图类=己健?
& lt;观点wx:=" {{navBarList}}”天气:关键=薄霸趝{项}}& lt;/view>
& lt;/view>
& lt;视图类=' div '天气:为="{{8}}"天气:关键="在第{{指数}}部分& lt;/view>
& lt;/scroll-view>
,
/* wxs文件*/页面{
字体大小:30 rpx;
背景:#有限元分析;
高度:100%;
}
.div {
宽度:100%;高度:500 rpx;
}
.nav-image {
宽度:100%;高度:400 rpx;
vertical-align:中间;
}
.navigation {
宽度:100%;
身高:100 rpx;
显示:flex;
justify-content:中心;
对齐项目:中心;
背景:# fff;
上图:0;左:0;/*只有使用定位才起效果*/}
{.navigation视图
填充:15 rpx 20 rpx;
保证金:0 20 rpx;
}
//wxs文件
var scrollEvent=函数(e, ins) {
var scrollTop=e.detail.scrollTop;
var navTop=e.currentTarget.dataset.top;
如果(scrollTop祝辞=navTop) {
ins.selectComponent (.navigation) .setStyle ({
“位置”:“固定”
})
其他}{
ins.selectComponent (.navigation) .setStyle ({
“位置”:“静态”
})
}
}
模块。出口={
scrollEvent: scrollEvent
}
//js文件
页面({/* *
*页面的初始数据
*/数据:{
navBarList:[喜欢,点赞”,“收藏”),
navTop: 0,//导航距顶部距离
},/* *
*生命周期函数——监听页面加载
*/>
& lt; !- - - wxml文件——比;
& lt; wxs模块=" scroll2 " src=" https://www.yisu.com/zixun/scroll2.wxs "祝辞& lt;/wxs>
& lt;滚动视图bindscroll=" {{scroll2。scrollEvent}}”风格=备叨?100%;“scroll-y>
& lt; !——头部——比;
& lt;图像src=" https://www.yisu.com/images/top_image.png "模式=癮spectFill”class=皀av-image”祝辞& lt;/image>
& lt;视图类=nav-icon的祝辞
& lt;导航开式=皀avigateBack”类=' back-icon祝辞& lt;/navigator>
& lt;/view>
& lt;视图类==暗己嚼浮狈绺竦牟煌该鞫?0;比;
& lt;导航开式=皀avigateBack”类=' back-icon祝辞& lt;/navigator>
& lt; view>我是导航条& lt;/view>
& lt;/view>
& lt; !——头部结束——比;
& lt;视图类=' div '天气:为="{{8}}"天气:关键="在第{{指数}}部分& lt;/view>
& lt;/scroll-view>
/* wxs文件*/{页面字体大小:30 rpx;背景:rgba(200年,58岁的57个,0.3);高度:100%;}
.div{宽度:100%;高度:500 rpx;}
.nav-image{宽度:100%;高度:400 rpx; vertical-align:中间;}
.nav-icon .nav-bar {
位置:固定;
上图:0;左:0;
身高:120 rpx;
}
.nav-bar {
宽度:100%;
显示:flex;
对齐项目:中心;
背景:# fff;
}
.back-icon {
宽度:100 rpx;
高度:100%;
显示:flex;
justify-content:中心;
对齐项目:中心;
}
{/*后.back-icon:利用伪类元素模拟出返回图标*/内容:“”;
显示:块;
宽度:25 rpx;高度:25 rpx;
border-top: 5 rpx固体# fff;
border-left: 5 rpx固体# fff;
变换:旋转(-45度);
}
后.nav-bar .back-icon:{边框颜色:# 000;}之前
//wxs文件
var scrollEvent=函数(e, ins) {
var scrollTop=e.detail.scrollTop;
如果(scrollTop> 100) {
ins.selectComponent (.nav-icon) .setStyle ({
“不透明度”:“0”
})
var点=(scrolltop - 100)/50;
ins.selectComponent (.nav-bar) .setStyle ({
“不透明度”:点
})
其他}{
ins.selectComponent (.nav-bar) .setStyle ({
“不透明度”:“0”
})
var点=(100 - scrolltop)/50;
ins.selectComponent (.nav-icon) .setStyle ({
“不透明度”:点
})
}
};
module.exports={
scrollEvent: scrollEvent
