小程序侧滑删除组件使用movable-area

最新推荐文章于 2024-06-21 11:30:21 发布

三月柳絮四月雨

最新推荐文章于 2024-06-21 11:30:21 发布

阅读量2.3k

点赞数

分类专栏：小程序文章标签：小程序

本文链接：https://blog.csdn.net/qq_34576655/article/details/81198569

版权

小程序专栏收录该内容

1 篇文章 0 订阅

订阅专栏

组件页面代码：

<movable-area>
  <movable-view class='conversation' catchtap='toChat' direction='horizontal'
    x='{{x}}' damping="100" data-index='{{index}}' data-userid='{{userid}}'
    bind:touchstart='touchstart' bind:touchend='touchend' catch:change='onChange'>
    <slot></slot>
    <view class='delete' catchtap='delConversation' data-index='{{index}}'>删除</view>
  </movable-view>
</movable-area>

组件JS代码：

// pages/sliderLeft/sliderLeft.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    userid: {
      type: Number,
      value: '1'
    },
    index: {
      type: Number,
      value: '0'
    },
    isOpen: {
      type: Boolean,
      value: false,
      observer: function (isOpen) {
        this.setData({
          x: isOpen ? -100 : 0
        })
      }
    }    
  },

  /**
   * 组件的初始数据
   */
  data: {
    x: 0,
  },

  /**
   * 组件的方法列表
   */
  methods: {
    onChange: function (e) {
      if (e.detail.source === 'touch') {
        this.setData({ x: e.detail.x })
      }
    },

    touchstart: function (e) {
      if(!this.data.isOpen){
        this.triggerEvent('conversationTouchstart', { index: e.currentTarget.dataset.index }, {})
      }
    },

    touchend: function (e) {
      var x = this.data.x;
      //删除按钮已显示，则一滑动就关闭
      if (this.data.isOpen && x > -96) {
        this.setData({ 
          x: 0,
          isOpen: false
        })
      }else if(x < -40) {
        //达到阈值则显示否则关闭
        this.setData({
          isOpen: true
        })
      } else {
        this.setData({
          x: 0,
          isOpen: false
        })
      }
    },

    /**
     * 删除会话
     */
    delConversation: function (e) {
      this.triggerEvent('delConversation', {index: e.currentTarget.dataset.index}, {})
    },

    /**
     * 跳转到聊天界面
     */
    toChat: function (e) {
      wx.navigateTo({
        url: '../chat/index?userId=' + e.currentTarget.dataset.userid,
      })
    },

  }
})

组件CSS代码：

movable-area{
  width: 1150rpx;
  height: 180rpx;
  display: flex;
  margin-left: -200rpx;
  justify-content: flex-end;
}

.conversation{
  width: 950rpx;
  height: 180rpx;
  position: static;
   display: flex;
}

.delete{
  width: 200rpx;
  height: 180rpx;
  background: red;
  color: white;
  font-size: 45rpx;
  line-height: 180rpx;
  text-align: center;
}

使用页面代码：

<block wx:for='{{conversations}}' wx:for-item='item' wx:for-index='index' wx:key='{{item.userId}}'>
  <swider-left is-open='{{item.isOpen}}'  userid='{{item.userId}}' index='{{index}}' 
    binddelConversation='delConversation' bindconversationTouchstart='touchstart'>
    <view class='userInfo'>
        <image class='avatar' src='{{item.avatar}}'></image>
        <view class='info'>
          <view class='name'>{{item.name}}
            <view class='remind' wx:if='{{item.unread_msg_count > 0}}'></view>
          </view>
          <view>{{item.mtime}}</view>
        </view>
      </view>
    </swider-left>
</block>

使用页面JS代码：

 /**
   * 隐藏所有删除按钮
   */
  touchstart: function(e){
    var conversations = this.data.conversations;
    conversations[e.detail.index].isOpen = false;
    this.setData({
      conversations: conversations
    })
  },

  /**
   * 删除列表项
   */
  delConversation: function (e) {
    //选项索引
    var index = e.detail.index;
  },