移动端左右滑动出现和隐藏按钮（适合vue和小程序开发）_vue3.0 移动端从右往左滑 显示功能按钮

在日常开发中，会碰到许许多多的样式布局，有时候用ui框架并不是特别的符合项目的需求，所以有的时候还是要自己亲自动手来写，这是一个简单的，左右滑动可以显示和隐藏删除按钮的一个小demo，大家可以相互学习学习，如果哪里表达的不太好，欢迎大家来指正，或者有更好的实现方法也可以评论，希望大佬们多多提意见。

首先来看一下效果图

首先先和大家说一下我的思路，最后把代码放到后边供大家参考

第一：首先我们先想一下应该怎样布局，肯定这个删除按钮是存在的，然后用户从右向左滑动的时候我们把它显示出来，然后从左向右滑动的时候我们在把这个删除按钮给隐藏掉。

这个时候我们可以这样去想，比如最外边的盒子来一个li，然后给这个li设置一个100%的宽度，然后li里面放一个盒子起一个类名比如叫.libox，这个libox的宽度给它设置成120%（当然这里写都成vw的单位也是可以的）。然后给li添加overflow：hidden，我们可以在libox中使用flex布局，分成3部分，左边的商品信息，中间的步进器，和右边的删除按钮，当然在这里第一部分和第二部分要站100%的宽度，自然右侧的删除按钮就显示不出来了。然后给这个libox盒子添加一个相对定位，然后只需控制libox的left属性为0和-20%即可。当然可以加一点过渡效果transition，不过加了过渡最好使用transform来移动libox。

第二：基本样式做好以后，我们再考虑一下怎样能让它滑动起来。

这里告诉大家两个移动端的事件

ontouchstart // 手指按下时触发
ontouchmove  // 手指在屏幕上移动时触发

我们知道这两个事件以后就简单了，大家可以这样想，我们在ontouchstart事件中拿到当前手指触碰的x轴上的位置，然后滑动的时候我们在ontouchmove事件中拿到用户滑动以后x轴上的位置，然后用ontouchstart中x轴上的位置减去ontouchmove中x轴上的位置，比如他们两个之差大于20，则我就控制libox的transform：transform: translateX(-20vw)即可。同样如果小于20后，我就控制libox的transform：transform: translateX(20vw)即可。

但是，还有一个问题就是，不管我们是在vue中还是小程序中，购物车里可能会有好几个商品，那么我们一般是从服务器拿到数据以后通过v-for或者wx:for来遍历出来这些libox，因为这些libox有着同样的一些属性和类名，那么我们怎样确定我们当前滑动的是哪个libox呢，就是我该怎样获取当前滑动的这个liboxDOM元素呢，我只有获取到了这个liboxDOM才能对其进行操作，libox.style.left=-20%如果写成document.querySelector('.libox')它拿到的又是哪个libox盒子呢？如果不确定我们当前滑动的是哪个libox的话，那么我们随便滑动一个libox，然后所有的libox就都会显示出删除按钮。所以我们可以换一种思路。

思路是这样的：

我们可以提前写好一个类名，比如就叫.isleft吧，然后这个类里边的css写上一个transform: translateX(-20vw)，然后我们在data属性中定义一个状态就叫isleft给他一个初始值为-1，然后我在这个要遍历的libox盒子上通过三元表达式来判断是否给当前的这个libox加上.isleft这个类名（哪个libox加上.isleft类名后，哪个libox中的删除按钮就会显示出来），可以用data属性中的isleft状态来和当前libox的index值来进行匹配。然后在滑动事件中来对data属性中的isleft状态进行改变。在libox的滑动事件中把当前的libox index值传到滑动事件中，然后在滑动事件中对isleft状态赋值，赋成libox传递过来的index的值，然后当在libox这个盒子的html结构中通过三元表达式来判断isleft==index，从而达到我滑动哪个libox，哪个libox的删除按钮就会显示出来。

以下是具体代码：（以小程序为例，vue大同小异，只要把思路想清楚vue用同样的方法实现）

html部分

<view class="ul">
  <view class="li" data-id="{{index}}" bindtouchstart="hStart" bindtouchmove="hMove" wx:for="{{aaa}}" wx:key="*this">
    <view class="libox {{isleft==index ? 'isleft' : ''}}">
      <view class="li_content">
        <checkbox></checkbox>
        <image src="{{item.url}}"></image>
        <view class="context">
          <view>{{item.name}}</view>
          <view style="color: darkred;">{{item.price}}</view>
        </view>
      </view>
      <view class="li_step">
        <view class="step">
          <text>-</text>
          <text>1</text>
          <text>+</text>
        </view>
      </view>
      <view class="del" bindtap="delgoods">删除</view>
    </view>
  </view>
</view>

css部分

.li {
  width: 100%;
  overflow: hidden;
  margin-top: 30rpx;
  box-shadow: 8rpx 8rpx 8rpx #F8F8FF;
}
.li .libox{
  position: relative;
  width: 120%;
  height: 200rpx;
  display: flex;
  justify-content: space-between;
  padding: 10rpx 0 10rpx 20rpx;
  box-sizing: border-box;
  transition: all .5s;
}
.li .li_step {
  position: relative;
  width: 30%;
}
.li .li_step .step {
  position: absolute;
  height: 70rpx;
  border-radius: 10rpx;
  overflow: hidden;
  width: 195rpx;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
 
}
.li .li_step text{
  display: inline-block;
  width: 65rpx;
  line-height: 70rpx;
  background-color: #f2f3f5;
  text-align: center;
}
.li .li_content {
  display: flex;
  width: 70%;
  line-height: 180rpx;
  box-sizing: border-box;
  justify-content: flex-start;
  padding: 0 20rpx;
}
.li .li_content image {
  width: 40%;
  overflow: hidden;
  height: 180rpx;
  margin: 0 20rpx;
}
.li .li_content .context {
  display: inline-block;
  width: 35%;
  margin-left: 20rpx;
  box-sizing: border-box;
  padding-top: 20rpx;
}
.li .li_content .context view {
  height: 70rpx;
  line-height: 70rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.del {
  width: 20%;
  line-height: 180rpx;
  text-align: center;
  background-color: #ee0a24;
  color: #fff;
  margin-left: 2%;
}
.isleft {
  transform: translateX(-20vw);
}

js部分

Page({
  data: {
    isleft: -1,
    aaa: [
      {
        url: 'http://localhost:5000/images/10/poster.jpg',
        name: '华为 HUAWEI Mate 30',
        price: '￥4499'
      },
      {
        url: 'http://localhost:5000/images/6/poster.jpg',
        name: 'Apple iPhone 11',
        price: '￥5999'
      }
    ]
  },
  xstar: 0,
  xmove: 0,
// 生命周期函数--监听页面隐藏
  onHide: function () {
    // 这里是如果用户向左滑动了以后，没有滑动回去，删除按钮显示的时候，切换到别的页面，那么就让切换到别的页面以前把删除按钮给它隐藏回去在切出去别的页面，这样用户回来的时候看不到删除按钮
    this.setData({
      isleft: -1
    })
  },
  // hStart和hMove方法是判断用户左右滑动显示和隐藏删除按钮
  hStart(e) {
    this.xstar = e.touches[0].pageX
  },
  hMove(e) {
    this.xmove = e.touches[0].pageX
    let x = this.xstar - this.xmove
    if (x>20) {
      this.setData({
        isleft: e.currentTarget.dataset.id
      })
    } else {
      this.setData({
        isleft: -1
      })
    }
  },
  // 删除商品
  delgoods() {
    console.log('删除')
  }
})

我也尝试过，在.isleft类中写成left:-20%，但是这样就没有过渡效果了（libox中已经加了transition了），显得很生硬。还有就是把transform: translateX(-20vw);写成transform: translateX(-20%);后，滑动出来删除按钮距离右侧有一点点小间距

可能是我写的css样式出了点小问题，宽度计算的不太准确，因为我还给libox加了一个padding值。

总之css中使用flex布局，不知道给多少宽度时候要么单位就都使用%，要么就都是用vw,不然两个单位混着用可能会出现问题，达不到想要布局的效果。