小程序 WXS响应事件（滚动菜单栏tab吸顶）

解决问题：
小程序页面滚动，tab触顶吸顶

解决办法：
1）页面滚动事件中监听处理（不推荐）
缺点：在安卓端性能非常差，吸顶效果反应迟钝，不流畅等问题。

2）WXS响应事件（推荐）

index.WXML
<wxs module="test" src="./test.wxs"></wxs> // 引入wxs// 页面滚动组件
<scroll-viewbindscroll="{{test.funcA}}"data-top-height="{{530}}" style='height:100%;'scroll-yscroll-with-animation="true"><view class="page-group-interaction page-group"><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>
</scroll-view>
<!-- scroll-view滚动组件
bindscroll 监听滚动事件 （必须）
bindscrolltolower 滚动到顶部/左边时触发
bindscrolltoupper 滚动到底部/右边时触发
data-top-height 传值 （必须）
style='height: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 ='height：100％;'属性，必须写上100%高度，不然触发不了滚动视图组件滚动事件

3）查看小程序 scroll-view官方文档