滑动删除(小程序)

<wxs module="fliter" src="../../../fliter/fliter.wxs"></wxs>

<view class='audio {{showDel? "tranleft" : ""}}' bindtouchstart='touchstart' bindtouchmove='touchmove'>
  <view class='audio-item' catchtap='toAudio' wx:if="{{audioData.id}}">
    <view class='info'>
      <view class='title'>{{audioData.title}}</view>
      <view class='type'>来自：{{audioData.type_name}}</view>
      <view class='detail'>
        <view>
          <text class="iconfont icon-icon_play_1 audio_icon"></text>
          <text>{{audioData.count}}</text>
        </view>
        <view>
          <text class="iconfont icon-icon_time audio_icon1"></text>
          <text>{{fliter.fen(audioData.audio_time)}}</text>
        </view>
        <view>
          <text>{{audioData.last_update_time}}</text>
        </view>
      </view>
    </view>
    <view class="img">
      <image class="cover" src='{{audioData.cover_url}}'></image>
      <image class="icon" src="../../../img/icon_play_3.png"></image>
    </view>
  </view>
  <view class='audio-item null-item' wx:if="{{!audioData.id}}">
    <view class='null'>该音频已被删除</view>
  </view>

  <view class='delete' catchtap='delete' data-id='{{audioData.cid}}' wx:if="{{showDel}}">
    <view>
      <view class='iconfont icon-clean'></view>
      <text>删除</text>
    </view>
  </view>
</view>

const $API = require('../../../utils/serve.js')

Component({
  properties: {
    comData: {
      type: Object,
      value: {}
    }
  },

  data: {
    showDel: false
  },
  methods: {
    startX: 0,
    endX: 0,

    toCompare: function(e) {
      let list = e.currentTarget.dataset.list;
      let show = e.currentTarget.dataset.show;
      let comparepremiumid=e.currentTarget.dataset.comparepremiumid
      let idArr = [];
      let insType = '';
      list.forEach(itm => {
        idArr.push(itm.weappProductInfo.id);
        insType = itm.weappProductInfo.ins_type;
      })
      if (show) {
        console.log(comparepremiumid,"comparepremiumid");
        
        let url=`/pages/product/compare?ids=${idArr.join(',')}&insType=${insType}&id=${comparepremiumid}&Type=collect`
        console.log(url,"url");
        if(comparepremiumid){
          wx.navigateTo({
            url: `/pages/product/compare?ids=${idArr.join(',')}&insType=${insType}&id=${comparepremiumid}&Type=collect`
          })
        }else{
          wx.navigateTo({
            url: `/pages/product/compare?ids=${idArr.join(',')}&insType=${insType}`
          })
        }
      } else {
        $API.toast('该产品已删除');
      }
    },

    touchstart: function(e) {
      this.startX = e.changedTouches[0].clientX
    },
    touchmove: function(e) {
      this.endX = e.changedTouches[0].clientX
      this.deleteToggle();
    },

    deleteToggle: function() {
      let toggleNum = 70;
      if (this.startX - this.endX > toggleNum && this.data.showDel == false) {
        this.setData({
          showDel: true
        })
      }
      if (this.endX - this.startX > toggleNum && this.data.showDel == true) {
        this.setData({
          showDel: false
        })
      }
    },

    delete: function(e) {
      console.log(22222);
      
      let id = e.currentTarget.dataset.id;
      console.log(id);
      
      $API.post("delProductCompareCollection", {
        id
      }, () => {
        wx.showToast({
          title: '删除成功',
        })

        this.triggerEvent('comevent');

        this.setData({
          showDel: false
        })
      }, 1)
    }
  }
})

 

来源：oschina

链接：https://my.oschina.net/u/4004801/blog/4328537