miniAPP 滑块删除 20201205_miniapp-color-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_47738901/article/details/110673911

本文介绍了一种基于微信小程序的滑块删除功能实现方案。通过触摸事件监测滑块的左右移动，当滑动距离达到一定阈值时，改变滑块状态以实现删除操作。文章提供了完整的JSON配置、JS逻辑处理、WXML界面布局及WXSS样式代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

滑块效果如图
效果1

效果二

json文件代码

{
  "usingComponents": {},
  "navigationBarTitleText": "滑块删除"
}

js代码段

let startTouch_x=0;
Page({
  _touch_start_x:function (evt){//初始触摸位置
    startTouch_x=evt.changedTouches[0].pageX;
    // console.log(startTouch_x);
  },
  _touch_end_x:function(evt){//结束触摸位置
    let endTouch_x=evt.changedTouches[0].pageX;
    // console.log(endTouch_x);
    let cha =endTouch_x-startTouch_x;
    // console.log(startTouch_x);
    // console.log(cha);
    if (cha<=-30||(cha<=30&&cha>=0)) {//判断滑动距离是否打开滑块
      this.setData({
        isOpen:true
      })
    }if(cha>30||(cha>-30&&cha<0)) {//判断是否关闭
      this.setData({
        isOpen:false
      })
    } 
  },
  

  /**
   * 页面的初始数据
   */
  data: {
    isOpen:false,
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

wxml代码段

<!--pages/movable-delete/movable-delete.wxml-->
<view class="bg">
  <view class="area">
    <movable-area class="move_area" >
      <text></text>
      <movable-view class="move_cell-1" direction="horizontal" x="{{isOpen?'-150rpx':'0'}}" bindtouchstart="_touch_start_x" bindtouchend="_touch_end_x">//direction="horizontal"：仅横向滑动 ；bindtouchstart：绑定起始触摸位置事件 ；bindtouchend：绑定触摸结束位置事件
        <text>滑块一</text>
      </movable-view>
    </movable-area>
    <button class="button-1" >删除</button>//删除按钮
  </view>
</view>

wxss代码段

.bg{
  background-color: rgb(39, 161, 161);
  width: 100vw;
  height: 100vh;
}//背景颜色，高度满窗口，宽度满窗口

.area{
  display: flex;
}//设定可滑动区域及删除按钮的区域块布局样式为：flex布局
.move_area{
  width: 80vw;
  height: 10vh;
 // background-color: darkgray;//为了便于观察设置滑块可移动区域背景
}//滑块可移动区域宽高为80vw 10vh 

.button-1{
  flex: 1;
  background-color: tomato;
  text-align: center;
  font-size: 25rpx;
  height: 10vh;
  line-height: 8vh;
}//设定按钮的样式布局
.move_cell-1{
  width: 100vw;
  height: 10vh;
  background-color:wheat;
  z-index: 2;滑块z轴置顶
}//滑块样式及布局

.move_cell-1 text{
  height: 10vh;
  line-height: 10vh;
  flex: 1;
  display: block;
  text-align: center;
  font-size: larger;
}//滑块文本样式及布局