uniapp 微信小程序 ios 滑动 微信小程序滑动按钮

今天看我们图上有这么一个功能

web端的做过，这个微信小程序的没做过，于是上手册上找组件，寻思会跟app一样有什么组件呢，结果让我失望了，没有，好了，既然没有咱们自己做一个不就完了，它没组件，但是有事件啊

这三个函数就够了

注意：讲一下工作原理，然后直接上代码
两个重叠的盒子，下方的盒子放两个按钮，上方的盒子放要展示的内容，默认是盖住下方的两个按钮的，然后只需要将上方的盒子向左移动就可以一点点露出来下方的按钮
直接上代码：

<view class="address-list">
  <view class="list-item" wx:for="{{list}}" wx:key="id">
    <view class="item-btns">
      <view class="set-default">设为默认</view>
      <view class="delete-btn">删除</view>
    </view>
    <view class="item-cont" data-index="{{index}}" style="left:{{item.offsetX}}rpx" bindtouchstart="touchStart" catchtouchmove="touchMove" bindtouchend="touchEnd">
      <view class="item-cont-left" bindtap="choseNow" data-index="{{index}}">
        <image hidden="{{!item.check}}" class="item-cont-left-icon" src="../../utils/image/shop/icon-checked.png"></image>
        <view class="item-cont-left-txt">
          <view class="item-cont-left-txt-top">
            <text class="item-cont-left-txt-top-name">{{item.name}}</text>
            <text class="item-cont-left-txt-top-mobile">{{item.mobile}}</text>
          </view>
          <view class="item-cont-left-txt-btm">{{item.detail}}</view>
        </view>
      </view>
      <view class="item-cont-right" bindtap="editNow">
        <image class="item-cont-right-icon" src="../../utils/image/shop/icon-edit.png"></image>
      </view>
    </view>
  </view>
</view>

page{
  width:100%;
  height:100%;
}
.address-list{
  width:100%;
  height:100%;
}
.list-item{
  /* padding:0rpx 24rpx;
  box-sizing: border-box; */
  height:130rpx;
  border-top:1rpx solid #f4f4f4;
  border-bottom:1rpx solid #f4f4f4;
  position:relative;
}
.item-btns{
  display:flex;
  justify-content: flex-end;
}
.set-default{
  width:136rpx;
  height:130rpx;
  background:#F0EDF1;
  color:#222222;
  font-size:24rpx;
  line-height:130rpx;
  text-align:center;
}
.delete-btn{
  width:136rpx;
  height:130rpx;
  background:#FF484E;
  color:#FEFEFE;
  font-size:24rpx;
  line-height:130rpx;
  text-align: center;
}
.item-cont{
  padding:0rpx 24rpx;
  box-sizing: border-box;
  position:absolute;
  top:0rpx;
  left:0rpx;
  width:100%;
  height:100%;
  background:#FFFFFF;
  display:flex;
  justify-content: space-between;
  align-items: center;
}
.item-cont-left{}
.item-cont-left-icon{
  width:34rpx;
  height:34rpx;
  display:inline-block;
  vertical-align: middle;
  margin-right:18rpx;
}
.item-cont-left-txt{
  display:inline-block;
  vertical-align: middle;
  width:520rpx;
}
.item-cont-left-txt-top{
  color:#383838;
  font-size:28rpx;
}
.item-cont-left-txt-top-name{}
.item-cont-left-txt-top-mobile{}
.item-cont-left-txt-top.active{
  color:#FC9541;
}
.item-cont-left-txt-btm{
  color:#5F5F6B;
  font-size:24rpx;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.item-cont-right{}
.item-cont-right-icon{
  width:24rpx;
  height:24rpx;
}

// shop/addressList/addressList.js
let recordStartX = 0, currentOffsetX = 0, curIndex = 0; //按下初始值，当前滑块初始值，当前滑块下标
Page({

  /**
   * 页面的初始数据
   */
  data: {
    list:[
      {
        id:1,
        name:'小王1',
        mobile:'13888888888',
        detail:'北京市海淀区某某某某海淀区某某某某海淀区某某某某海淀区某某某某'
      },
      {
        id:2,
        name:'小王2',
        mobile:'13888888888',
        detail:'海淀区某某某某海淀区某某某某海淀区某某某某海淀区某某某某海淀区某某某某'
      },
      {
        id:3,
        name:'小王3',
        mobile:'13888888888',
        detail:'海淀区某某某某海淀区某某某某海淀区某某某某'
      },
      {
        id:4,
        name:'小王4',
        mobile:'13888888888',
        detail:'海淀区某某某某海淀区某某某某'
      },
      {
        id:5,
        name:'小王5',
        mobile:'13888888888',
        detail:'海淀区某某某某海淀区某某某某海淀区某某某某'
      },
    ],
    curId:2,

    offsetNum:-268, //这是两个按钮的宽度
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.check();
  },
  choseNow:function(e){ //选中当前地址并返回订单页
    let index = e.currentTarget.dataset.index;
    let list = this.data.list;
    list.map(el=>{
      el.check = false;
    })
    list[index].check = true;
    this.setData({
      list
    })
    wx.navigateTo({
      url: '../shopOrder/shopOrder',
    })
  },
  editNow: function () { //去编辑点击的地址，都是虚拟数据，没做什么参数
    wx.navigateTo({
      url: '../addressEdit/addressEdit',
    })
  },
  touchStart: function (e) { //触摸开始，记录初始值，并记录当前触摸的下标
    recordStartX = e.touches[0].clientX;
    curIndex = e.currentTarget.dataset.index;
    currentOffsetX = this.data.list[curIndex].offsetX;
  }
  ,
  touchMove: function (e) { //移动手指
    let list = this.data.list;
    let x = e.touches[0].clientX;
    let mx = recordStartX - x;

    let result = currentOffsetX - mx;
    if (result >= this.data.offsetNum && result <= 0) {
      list[curIndex].offsetX = result;
    }
    this.setData({
      list
    });
  }
  ,
  touchEnd: function (e) { //手指抬起来(触摸结束)
    let list = this.data.list;
    let item = list[curIndex];
    let halfOffset = this.data.offsetNum / 2; /*滑过一半就直接滑到终点，滑不到一半就再回去*/
    if (item.offsetX < halfOffset) { //这里要做判断，总不能滑一半扔那儿不管了吧
      item.offsetX = this.data.offsetNum;
    } else {
      item.offsetX = 0;

    }
    this.setData({
      list
    });
  },

  check:function(){ //选中当前地址的事件
    let list = this.data.list;
    let curId = this.data.curId;
    list.map(el=>{
      if(el.id == curId){
        el.check = true;
      }else{
        el.check = false;
      }
      el.offsetX = 0;
    })
    console.log(list)
    this.setData({
      list
    })
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})

效果展示：

我这个可以显示多行的按钮，如果想让只显示一行的按钮的话，可以在touchStart或者touchEnd处，做一个限制，当滑动另一行的时候之前的复位