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-滚动菜单栏贴顶，然而并没有达到预期效果
用滚动监听在安卓端性能非常差，贴顶效果反应迟钝，不流畅
遇到同样的问题，看不出来哪里有问题，求大神解答
====================分割线================
主要原因是scroll-view组件设置了style='height:100%;'属性，导致每次滚动都不是scroll-view组件滚动，而是页面的滚动。给scroll-view组件设置一个比较大的数字值就能触发wxs响应函数的执行了。
官方介绍：目前在WXS函数里面仅支持console.log方式打日志定位问题，注意连续的重复日志会被过滤掉。这点也需要注意
好心塞，官方demo有Bug
主要是不太明白，为什么不会触发。
你好，我想问一下我在昨天敲代码的时候这个可以用，今天就不行了，没有触发了，知道什么原因吗