微信小程序-侧滑删除

简介

movable-view和movable-area是可移动的视图容器,在页面中可以拖拽滑动。

本篇文章将会通过该容器实现一个常用的拖拽按钮功能。

使用效果

代码实现

side-view.wtml

布局见下面代码,left view为内容区域,right view为操作按钮,在使用时候只需要替换left和right 对应slot即可。

movable-area 宽度 为left宽度,movable-view宽度为left + right宽度

监听事件为鼠标点击和鼠标弹起事件。

html 复制代码
<!--slide-view/slide-view.wxml-->
<movable-area class="container" style="width: {{width}}rpx;height: {{height}}rpx;">
  <movable-view direction="horizontal" class="movable-view" style="width: {{width + slideWidth}}rpx; height: {{height}}rpx;" inertia bind:touchend="onTouchEnd" 
  damping="100"
  out-of-bounds
  x = "{{x}}" 
  bind:touchstart="onTouchStart" >
    <view class="left" >
      <slot name= "left"></slot>
    </view>
    <view class= "right">
      <slot name="right"></slot>
    </view>
  </movable-view>
</movable-area>
side-view.js

组件的state 为 x, x表示movable-view 水平位置,在鼠标弹起时候,若移动距离大于threshold,则设置x为-threshold,否则为0。

注意: 事件event 对应位置,大小单位为px,而我们设置的参数都是rpx,若对其计算时候,注意两者之间转换。

javascript 复制代码
Component({
  /**
   * 组件的属性列表
   */
  options: {
    multipleSlots: true
  },
  properties: {
    //  组件显示区域的宽度,rpx
    width: {
      type: Number,
      value: 750
    },
    //  组件显示区域的高度,rpx
    height: {
      type: Number,
      value: 0
    },
    //  组件滑动显示区域的宽度,rpx
    slideWidth: {
      type: Number,
      value: 0
    }
  },

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

  /**
   * 组件的方法列表
   */
  ready: function ready() {
    this.init();
  },
  ready: function () {
    this.initFunc()
  },

  methods: {
    initFunc: function(){
      // 获取右侧滑动显示区域的宽度
      var that = this;
      var query = wx.createSelectorQuery().in(this);
      query.select('.right').boundingClientRect(function (right) {    
        that._slideWidth = right.width * 2; // rpx
        that._threshold = right.width / 2; // px
        that.setData({
          width:750,
          height:100,
          slideWidth: that._slideWidth
        }) //触发渲染
      }).exec();
    },
    onTouchStart: function onTouchStart(e) {
      this._startX = e.changedTouches[0].pageX;
      console.log('startX:'+this._startX)
    },

    //  当滑动范围超过阈值自动完成剩余滑动
    onTouchEnd: function onTouchEnd(e) {
      this._endX = e.changedTouches[0].pageX; // px
      console.log('endX:'+this._endX)
      var _endX = this._endX,
          _startX = this._startX, 
          _threshold = this._threshold;
    
      if (_startX - _endX >= _threshold) {
        this.setData({
          x: -this._slideWidth
        });
      } else {
        this.setData({
          x: 0
        });
      } 
    },

    
  }
});

index.wtml

html 复制代码
<!--index.wxml-->

<slide-view heigth = "100" width="750">
  <view class="left" slot = "left">
    这是一段文字
  </view>
  <view class="right" slot = "right" width = "300">
    <view class="read">已读</view>
    <view class="delete">删除</view>
  </view>
</slide-view>
相关推荐
難釋懷9 小时前
微信小程序全局配置
微信小程序·小程序
Enti7c9 小时前
微信小程序核心知识点速览
微信小程序·小程序
2501_915918411 天前
Fiddler中文版全面评测:功能亮点、使用场景与中文网资源整合指南
android·ios·小程序·https·uni-app·iphone·webview
说私域1 天前
从品牌附庸到自我表达:定制开发开源AI智能名片S2B2C商城小程序赋能下的营销变革
人工智能·小程序
難釋懷1 天前
第一个小程序
小程序
春哥的研究所1 天前
可视化DIY小程序工具!开源拖拽式源码系统,自由搭建,完整的源代码包分享
小程序·开源·开源拖拽式源码系统·开源拖拽式源码·开源拖拽式系统
weixin_lynhgworld1 天前
盲盒一番赏小程序技术实现方案:高并发与防作弊的平衡之道
小程序
今日热点1 天前
小程序主体变更全攻略:流程、资料与异常处理方案
经验分享·微信·小程序·企业微信·微信公众平台·微信开放平台
鸭鸭梨吖1 天前
微信小程序---下拉框
微信小程序·小程序
CRMEB定制开发1 天前
CRMEB Pro版前端环境配置指南
前端·微信小程序·uni-app·商城源码·微信商城·crmeb