微信小程序WXS响应事件，主要用于有频繁用户交互的效果在小程序上（滚动菜单栏贴顶）

WXS响应事件官方文档

背景：
有频繁用户交互的效果在小程序上表现是比较卡顿的，例如页面有 2 个元素 A 和 B，用户在 A 上做 touchmove 手势，要求 B 也跟随移动，movable-view 就是一个典型的例子。一次 touchmove 事件的响应过程为：

a、touchmove 事件从视图层（Webview）抛到逻辑层（App Service）

b、逻辑层（App Service）处理 touchmove 事件，再通过 setData 来改变 B 的位置

一次 touchmove 的响应需要经过 2 次的逻辑层和渲染层的通信以及一次渲染，通信的耗时比较大。此外 setData 渲染也会阻塞其它脚本执行，导致了整个用户交互的动画过程会有延迟。

<wxs module="test" src="./test.wxs"></wxs>//先进行绑定（注意这个test.wxs文件是和执行文件在同一目录）
<scroll-view bindscroll="{{test.funcA}}" style='height:{{height}}px;' scroll-y>//触发条件为bindscroll滚动事件，执行test.wxs中的funcA
  <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>

var funcA = function (e, ins) {//这里的ins可自行命名
  // console.log('source is', JSON.stringify(e))
  var scrollTop = e.detail.scrollTop//获取当前滚动的高度
  console.log(scrollTop);
  if (scrollTop > 100) {//大于100
    ins.selectComponent('.page-group').setStyle({ "background-color": 'black' }).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
}

.page-banner{height:100px;background-color: greenyellow;color:#fff;}
.page-group{
  display: table;
  background-color: rgba(00, 00, 00, 1);
  width: 100%;
  table-layout: fixed;
  position: relative;
  top: 0;
  left: 0;
}
.page-group-position{
  position: fixed;
}
.page-nav-list{
  padding:30rpx 0 ;
  display: table-cell;
  text-align: center;
  color: #fff;
}
.goods-list{
  height: 300px;
  background-color: green;
  padding: 20rpx;
  color:#fff;
}