微信小程序wxs实现slider滑块跟随

slider.gif

微信小程序音频播放时，有可能需要实现跟随滑块的进度显示效果，如上面演示图。

这个效果如果微信小程序的JavaScript 代码中实现的话，在性能稍差的手机上会出现迟滞的问题，而使用WXS实现则可以解决。

首先看WXS代码：

module.exports = {
  /**
   * 监听slider的位置变化事件
   */
  handle_slider_changeing: function(e, ins) {
    var slider_left = e.target.dataset.slider_left; // slider的左坐标
    var slider_time_width = e.target.dataset.slider_time_width; // 跟随块的宽度
    var slider_width = e.target.dataset.slider_width; // slider的宽度

    var slider_max = e.target.dataset.slider_max; // 进度最大值
    var position = e.detail.value; // 进度当前值

    // 计算出当前跟随块应该显示的left坐标
    var left = slider_left + (position / slider_max) * slider_width - (slider_time_width / 2);

    // 将坐标设置到跟随块元素的style中
    ins.selectComponent('.slider-num').setStyle({
      left: left + 'px',
      visibility: "visible"
    })

    // 将当前的位置回调到javascript层，不需要再处理的话可以不回调
    ins.callMethod('handle_slider_changeing',{position:position});
  },
}

再看wxml：

<!-- 跟随块 -->
<view hidden="{{!sliderChangeTime}}" class="slider-num" style="visibility: hidden;">{{sliderChangeTime}}</view>
<!-- 滚动条 -->
<slider class="slider" 
data-slider_max="{{slider_max}}" 
data-slider_left="{{slider_left}}" 
data-slider_width="{{slider_width}}" 
data-slider_time_width="{{slider_time_width}}" bindchange="hanle_slider_change" 
bindchanging="{{wxsmodule.handle_slider_changeing}}" 
bindtouchstart="handle_slider_move_start" 
bindtouchend="handle_slider_move_end" 
min="0" max="{{slider_max}}" 
value="{{slider_value}}" />

wxml中重要的事情是：

1. 将计算必须的参数赋值到组件的dataset属性中（下文所述，通过javascript初始化时通过节点查询器获取）
2. bindchanging由WXS的wxsmodule.handle_slider_changeing函数监听

通过javascript初始化时获取各元素尺寸参数：

    var query = wx.createSelectorQuery() //创建节点查询器 query
    query.select('.slider-num').boundingClientRect() // 跟随块的坐标
    query.select('.slider').boundingClientRect() // 
    query.exec(function(res) {
      slider_time_width = res[0].width;
      slider_left = res[1].left + 18; //18为margin的值，单位px，slider组件默认值
      slider_width = res[1].width - 36;
      // 通过setData方法设置到元素的dataset中
      self.setData({
        slider_left: slider_left,
        slider_width: slider_width,
        slider_time_width: slider_time_width
      });
    })

其他的bindchange、bindtouchstart等回调就像正常使用slider来操作音频播放一样处理即可。

初写文章，不知道有没有人看，如有demo需求的请留言，我再整理好demo上传好了。