小程序实现item列表左右滑动删除等操作（附源码）

客官°小女子只卖身不卖艺 2022-01-28 09:41 305阅读 0赞

### 效果 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTcwNjQxNQ_size_16_color_FFFFFF_t_70][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTcwNjQxNQ_size_16_color_FFFFFF_t_70 1][]

### 项目地址: ###

项目中使用了color-ui的ui库方便样式

[https://gitee.com/maxiaodong1996/list.git][https_gitee.com_maxiaodong1996_list.git]

### 一、index.js ###

### 二、index.wxml ###

<view class='pageTop'>
      <scroll-view scroll-y="{
       {isScroll}}" enable-back-to-top='true' bindscrolltolower='lower' bindscrolltoupper='upLoad' style='overflow: scroll;-webkit-overflow-scrolling:touch;'>
        <block wx:key="index" wx:for="{
       {dataShow}}">
          <view data-index='{
       {index}}' class="order-item" bindtouchstart="drawStart" bindtouchmove="drawMove" bindtouchend="drawEnd" style="right:{
       {item.right}}rpx;left:{
       {item.left}}rpx">
            <view class="contentBody shadow-warp" bindtap='goDetails' data-id='{
       {item.id}}'>
              <view class='title'>
                {
       {item.company}}
              </view>
              <view class='time'>
                {
       {item.time}}
              </view>
              <view class='title'>
                <text>{
       {item.university}}</text>
                <view>{
       {item.place}}</view>
              </view>
            </view>
            <view class="remove" bindtap="delItem">取消</view>
            <view class="left" bindtap="delItem">完成</view>
          </view>
        </block>
        <view wx:if='{
       {noData}}' class="noData">没有更多了~</view>
      </scroll-view>
    </view>

### 三、index.wxss ###

.pageTop {
      position: fixed;
      width: 100%;
      height: 100%;
    }
    
    scroll-view {
      height: 100%;
      overflow: scroll;
    }
    
    /*循环周天样式  End*/
    
    .contentBody {
      width: 94%;
      background: white;
      margin-left: 3%;
      margin-right: 3%;
      border-radius: 8px;
      border: 1px solid white;
      margin-top: 3%;
      padding-bottom: 12px;
    }
    
    .title {
      margin-top: 8px;
      margin-left: 22%;
    }
    
    .origin {
      margin-top: 8px;
      margin-left: 10%;
      font-size: 10px;
    }
    
    .originInfo {
      margin-left: 7%;
      font-size: 10px;
    }
    
    .time {
      text-align: left;
      width: 100%;
      margin-left: 16px;
      font-size: 16px;
    }
    
    .noData {
      width: 96%;
      margin-left: 2%;
      margin-right: 2%;
      border-radius: 8px;
      padding-top: 30px;
      padding-bottom: 16px;
      text-align: center;
    }
    
    .scroll-view {
      height: 100px;
      background-color: #313751;
      width: 100%;
      white-space: nowrap;
    }
    
    .switch_info {
      margin-left: 24rpx;
    }
    
    .cuIcon-back {
      display: none;
    }
    
    .total {
      color: black;
      margin-left: 22%;
    }
    
    .showNumInfo {
      display: flex;
      text-align: left;
      background-color: #fff;
      height: 40px;
      width: 100%;
      z-index: 1;
      padding-top: 15rpx;
      position: fixed;
    }
    
    .item {
      height: 90%;
      display: inline-block;
    }
    
    .text-view {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      width: 100%;
      height: 100%;
      color: #fff;
    }
    
    .order-item {
      width: 100%;
      position: relative;
      display: flex;
    }
    
    .remove {
      margin-bottom: 12px;
      margin-top: 12px;
      border-radius: 8px;
      /* transform: translateX(10%); */
      width: 170rpx;
      height: 92%;
      background-color: #313751;
      color: white;
      position: absolute;
      top: 0;
      right: -170rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    .left {
      margin-bottom: 12px;
      margin-top: 12px;
      border-radius: 8px;
      /* transform: translateX(10%); */
      width: 170rpx;
      height: 92%;
      background-color: #313751;
      color: white;
      position: absolute;
      top: 0;
      left: -170rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }

以上是核心代码 具体的可以下载项目看[https://gitee.com/maxiaodong1996/list.git][https_gitee.com_maxiaodong1996_list.git]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTcwNjQxNQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190524084919866.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTcwNjQxNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTcwNjQxNQ_size_16_color_FFFFFF_t_70 1]: /images/20220128/289ca99ab579482e92dc09ba632b1404.png
[https_gitee.com_maxiaodong1996_list.git]: https://gitee.com/maxiaodong1996/list.git