北京工信部网站备案查询,广东广东深圳网站建设,电商网站建设机构,深圳品牌vi设计小程序 WXS响应事件#xff08;滚动菜单栏tab吸顶#xff09;
解决问题#xff1a; 小程序页面滚动#xff0c;tab触顶吸顶
解决办法#xff1a; 1#xff09;页面滚动事件中监听处理#xff08;不推荐#xff09; 缺点#xff1a;在安卓端性能非常差#xff0c;吸…小程序 WXS响应事件滚动菜单栏tab吸顶
解决问题 小程序页面滚动tab触顶吸顶
解决办法 1页面滚动事件中监听处理不推荐 缺点在安卓端性能非常差吸顶效果反应迟钝不流畅等问题。
2WXS响应事件推荐
index.WXML
wxs moduletest src./test.wxs/wxs // 引入wxs// 页面滚动组件
scroll-viewbindscroll{{test.funcA}}data-top-height{{530}} styleheight:100%;scroll-yscroll-with-animationtrueview classpage-group-interaction page-groupview classpage-nav-listtext首页/text/viewview classpage-nav-listtext活动/text/viewview classpage-nav-listtext菜单/text/viewview classpage-nav-listtext我的/text/view/view
/scroll-view
!-- scroll-view滚动组件
bindscroll 监听滚动事件 必须
bindscrolltolower 滚动到顶部/左边时触发
bindscrolltoupper 滚动到底部/右边时触发
data-top-height 传值 必须
styleheight:100%;必须必须写上100%高度不然触发不了滚动事件--index.wxs
var funcA function (e, ins) {var scrollTop e.detail.scrollTop; // 滚动条距离页面顶部的距离var topHeight e.currentTarget.dataset.topHeight; // 接收传值tab距离页面顶部的距离if (scrollTop topHeight ) {ins.selectComponent(.page-group).setStyle({// 吸顶background-color: c}).addClass(page-group-fixed)} else {ins.selectComponent(.page-group).setStyle({background-color: rgba(00, 00, 00, Math.max(0, (scrollTop) / 100) )}).removeClass(page-group-position)}
}
module.exports {funcA: funcA
}.page-group-fixed{position: fixed;top: 0;left: 0;z-index: 1000;box-shadow: 0rpx 10rpx 10rpx 0rpx rgba(196, 196, 196, 0.1);
}注意 1页面使用scroll-view滚动代替页面滚动之后上拉下拉加载之类的都要用scroll-view的事件来处理
2滚动视图组件设置了style height100;属性必须写上100%高度不然触发不了滚动视图组件滚动事件
3查看小程序 scroll-view官方文档
