微信小程序|开发实战篇之五-slide-view滑动菜单组件

前言

实战篇内容参考：
1、Lin Ui开源组件源码分析。https://doc.mini.talelin.com/
2、开发过程遇到问题。

1、微信小程序操作dom元素

操作dom元素需要JavaScript基础，因此学习之。

先介绍一些微信小程序的API函数：
参考文档：https://developers.weixin.qq.com/miniprogram/dev/api/wxml/SelectorQuery.in.html

（1）wx.createSelectorQuery()
（2）wx.createSelectorQuery().in(this) // 存在自定义组件使用该创建搜索器函数
（3）SelectorQuery.select(string selector)
（4）NodesRef.boundingClientRect(function callback)
（5）SelectorQuery.exec(function callback)

（1）返回一个 SelectorQuery 对象实例。在自定义组件或包含自定义组件的页面中，应使用 this.createSelectorQuery() 来代替。
（2）将选择器的选取范围更改为自定义组件 component 内。（初始时，选择器仅选取页面范围的节点，不会选取任何自定义组件中的节点）。
（3）在当前页面下选择第一个匹配选择器 selector 的节点。返回一个 NodesRef 对象实例，可以用于获取节点信息。
（4）添加节点的布局位置的查询请求。相对于显示区域，以像素为单位。其功能类似于 DOM 的 getBoundingClientRect。返回 NodesRef 对应的 SelectorQuery。
回调函数，在执行 SelectorQuery.exec 方法后，节点信息会在 callback 中返回。
（5）执行所有的请求。请求结果按请求次序构成数组，在callback的第一个参数中返回。

1.1 slide-view组件的wxml骨架文件

滑动组件slide-view没有滑动的初始样式为：

向左滑动的样式为：

1.1.1 涉及movable-view组件属性

因为class和style样式文件对于js逻辑而言不重要，因此删去以免影响js的阅读。

<!--components/slide-view/index.wxml-->
<movable-area class="" style="">
  <movable-view direction="horizontal" class=""
  out-of-bounds="{
   
   {out}}" damping="20" disabled="{
   
   {disabled}}"
  x = "{
   
   {x}}" style="" 
  intertia bindtouchend="onTouchEnd" bindtouchstart="onTouchStart" bindchange="onChange">
    <view class="" style="">
      <slot name="left"></slot>
    </view>
    <view class="" mut-bind:tap="onRightTap" style="">
      <slot name="right"></slot>
    </view>
  </movable-view>
</movable-area>

1. 首先最外层是movable-area表示中间的元素移动的范围。开发者使用时可以对其width和height进行设置。
2. 子节点是movable-view表示可移动的视图容器，在页面中可以拖拽滑动。movable-view必须在 movable-area 组件中，并且必须是直接子节点，否则不能移动。（1）direction设置移动方向—水平移动；（2）out-of-bounds表示是否允许移动出范围—false表示不允许；（3）damping表示阻尼系数，值越大表示；（4）disabled表示是否禁用移动模块—true的就是禁用移动；（5）x，y属性表示各方向上的移动—定义x轴方向的偏移，如果x的值不在可移动范围内，会自动移动到可移动范围；改变x的值会触发动画；（6）intertia表示滑块movable-view是否带有惯性；（7）bindtouchstart和bindtouchend表示手指触摸动作开始（手指放上去开始直到结束）、手指触摸动作结束（手指拿开）。bind属于事件参考【小程序事件详情】；（8）两个view中包裹slot插槽，用来插入开发者