WXS响应事件(滚动菜单栏贴顶),函数不触发,官方demo也有Bug
WXML文件 <wxs module="test" src="./test.wxs"></wxs> <scroll-view bindscroll="{{test.funcA}}" style='height:100%;' scroll-y> <view class="page-banner"> <image class="image" src="/images/1.jpeg" style='width:100%;'></image> </view> <view class="page-group-interaction page-group" style='background-color:rgba(00, 00, 00, 0);'> <view class="page-nav-list"><text>首页</text></view> <view class="page-nav-list"><text>活动</text></view> <view class="page-nav-list"><text>菜单</text></view> <view class="page-nav-list"><text>我的</text></view> </view> <view class="goods-list"> </view> <view class="goods-list"> goods-list </view> <view class="goods-list"> goods-list </view> <view class="goods-list"> goods-list </view> <view class="goods-list"> goods-list </view> </scroll-view> WXS文件 var funcA = function (e, ins) { // console.log('source is', JSON.stringify(source)) var scrollTop = e.detail.scrollTop if (scrollTop > 100) { ins.selectComponent('.page-group').setStyle({ "background-color": 'c' }).addClass('page-group-position') ins.selectComponent('.page-banner .image').setStyle({ opacity: 0 }) } else { ins.selectComponent('.page-group').setStyle({ "background-color": 'rgba(00, 00, 00, ' + Math.max(0, (scrollTop) / 100) + ')' }).removeClass('page-group-position') ins.selectComponent('.page-banner .image').setStyle({ opacity: 1 - Math.max(0, (scrollTop) / 100) }) } } module.exports = { funcA: funcA } JS文件 Page({ data: { sticky: false, opacity: 0 }, //滚动条监听 _onPageScroll: function (e) { console.log(5) }, onShow() { }, onReady() {} }) 此乃官方demo-滚动菜单栏贴顶,然而并没有达到预期效果 https://developers.weixin.qq.com/miniprogram/dev/framework/view/interactive-animation.html?search-key=touchmove 用滚动监听在安卓端性能非常差,贴顶效果反应迟钝,不流畅 [图片] [图片]