微信小程序 滑动按钮

原生微信小程序实现滑动按钮

本文将介绍如何使用微信小程序中的 movable-view 和 movable-area 组件实现滑动按钮的功能，同时也会介绍一些注意事项。如果您还不熟悉这些组件的用法，可以先查看微信小程序官方文档。

注意

• movable-view必须在 movable-area 组件中，并且必须是直接子节点！
• 在使用 movable-view 组件时，要特别注意绑定的事件，避免多次触发，造成不必要的问题。

实现过程

在 wxml 文件中，需要将 movable-view 放置在 movable-area 组件内。以下是示例代码：

<!-- 记得写样式-->
<movable-area class="movable-area">
  <!-- 滑块底部显示文案 -->
  <!-- 注意：out-of-bounds必须为true -->
  <movable-view
    class="movable-view"  
    direction="horizontal"
    out-of-bounds="{{true}}" 
    x="{{movableX}}"
    bindchange="bottomChange"
    bindtouchend="touchend"
  >
    <van-icon name="arrow" />
    <van-icon name="arrow" />
    <van-icon name="arrow" />
  </movable-view>
</movable-area>

在 js 文件中，需要绑定 bottomChange 和 touchend 事件，实现滑动按钮的功能。

bottomChange({ detail }) {
// detail.source === "touch-out-of-bounds" 代表滑块滑动到最右侧或者最左侧；注意：滑动到最一侧后，滑动没有结束时会多次触发
// detail.x > 0 判断是否为向右侧滑动，可根据需求修改
 if (detail.source === "touch-out-of-bounds" && detail.x > 0) {
 	// 用于记录滑动状态，默认为 false，此处判断为防止多次触发
   if (!this.data.flag) {
   // 执行业务代码，注意：执行完成之后需将滑块位置重置到初始位置
     console.log("滑块已到达终点");
   }
   this.setData({
     flag: true, // 滑动完成，更新状态
   });
 }
},
touchend() {
// 触摸结束后判断是否滑动完成，没有则重置滑块位置为初始位置
 if (this.data.flag) {
   this.setData({
     flag: false, //触摸结束且滑动完成，重置状态
   });
 } else {
   this.setData({
     movableX: 0,// 触摸结束，但滑动没有完成，重置滑块位置
   });
 }
},

如果有什么不正确的欢迎各位大牛指正，有更好的实现方法也可以留言，一起进步！