微信小程序左右滑动删除事件详解

本文实例为大家分享了微信小程序左右滑动删除事件,供大家参考,具体内容如下

效果图

上代码

<scroll-view scroll-y enable-back-to-top style="height:{{ scrollHeight }}px" >
    <view>
        <block wx:for="{{ list }}" wx:for-item="item" wx:for-index="index" wx:key="index" >
            <view class="list {{ item.isTouchMove ? 'touch-move-active' : '' }}"    bindtouchstart="touchStart" bindtouchmove="touchMove" data-index="{{ index }}" >
                <view class="txt">{{ item.id }} -- {{ item.title }}</view>
                <view class="del" bindtap="delList" data-index="{{ index }}" > 删除 </view>
            </view>
        </block>
    </view>
</scroll-view>
/* 列表 */
.list {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 100rpx;
    line-height: 100rpx;
    overflow: hidden;
    text-align: center;
    border-bottom: 1px solid #cccccc;
}
/* 列表内容 */
.list .txt {
    flex-grow: 1;
    width: 100%;
    margin-left: -150rpx;
    background-color: #fff;
}
/* 删除按钮 */
.list .del {
    flex-grow: 0;
    width: 150rpx;
    color: #fff;
    background-color: #fe3e2f;
}

.list .txt, .list .del {
    transform: translateX(150rpx);
    transition: all 0.4s;
}
.touch-move-active .txt,.touch-move-active .del {
    -webkit-transform: translateX(0);
    transform: translateX(0);
}

js:

Page({
    /**
     * 页面的初始数据
     */
    data: {
        list: [
            { id: "0001", title: "商品1" },
            { id: "0002", title: "商品2" },
            // ..........
        ],
        scrollHeight: 0,  // scroll-view高度
        startX: 0,        // 开始X坐标
        startY: 0,        // 开始Y坐标

    },

    // 手指触摸动作开始
    touchStart: function(e){
        let that = this;
        //开始触摸时 重置所有删除
        that.data.list.forEach(function (v, i) {
            if (v.isTouchMove) v.isTouchMove = false; // 只操作为true的
        })
        // 记录手指触摸开始坐标
        that.setData({
            startX: e.changedTouches[0].clientX,  // 开始X坐标
            startY: e.changedTouches[0].clientY,  // 开始Y坐标
            list: that.data.list
        })
    },

    // 手指触摸后移动
    touchMove: function(e){
        let that = this,
            index = e.currentTarget.dataset.index,    // 当前下标
            startX = that.data.startX,                // 开始X坐标
            startY = that.data.startY,                // 开始Y坐标
            touchMoveX = e.changedTouches[0].clientX, // 滑动变化坐标
            touchMoveY = e.changedTouches[0].clientY, // 滑动变化坐标
            // 获取滑动角度
            angle = that.angle({ X: startX, Y: startY }, { X: touchMoveX, Y: touchMoveY });
     // 判断滑动角度
        that.data.list.forEach(function (v, i) {
            v.isTouchMove = false
            // 滑动超过30度角 return
            if (Math.abs(angle) > 30) return;
            if (i == index) {
                // 右滑
                if (touchMoveX > startX) 
                    v.isTouchMove = false
                // 左滑
                else 
                    v.isTouchMove = true
            }
      })
      // 更新数据
      that.setData({
          list: that.data.list
      })
    },

    // 计算滑动角度
    angle: function (start, end) {
        let that = this,
            _X = end.X - start.X,
            _Y = end.Y - start.Y;
        // 返回角度 /Math.atan()返回数字的反正切值
        return 360 * Math.atan(_Y / _X) / (2 * Math.PI);
    },

    // 删除
    delList: function(e){
        let that = this,
            index = e.currentTarget.dataset.index;  // 当前下标
     // 切割当前下标元素,更新数据
        that.data.list.splice(index, 1); 
        that.setData({
            list: that.data.list
        })
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        let that = this;
        // 动态获取屏幕高度
        that.setData({
            scrollHeight: wx.getSystemInfoSync().screenHeight
        })
    },
})

这是左滑动删除,如需要右滑动删除在js页面调整一下就好。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 微信小程序实现滑动删除

    本文实例为大家分享了微信小程序实现滑动删除的具体代码,供大家参考,具体内容如下 wxml <view class="bgwhite bor-bom-f2 row just-btw alignitems  {{item.isTouchMove ? 'touch-move-active' : ''}}" wx:for="{{dataList}}" wx:key="index">   <view class="item-le

  • 微信小程序基于movable-view实现滑动删除效果

    基于movable-view实现的一种较为完美的滑动删除效果 前言:用了很多去实现滑动删除的效果,都不太尽如人意,最后用小程序官方专用滑动组件来实现,但是这个组件有一点坑,咱们慢慢道来 1.wxml布局 <view class="list"> <view class="row" wx:for="{{list}}" wx:key="id"> <movable-area class="lis

  • 微信小程序 向左滑动删除功能的实现

    微信小程序 向左滑动删除功能的实现 实现效果图: 实现代码: 1.wxml touch-item元素绑定了bindtouchstart.bindtouchmove事件 <view class="container"> <view class="touch-item {{item.isTouchMove ? 'touch-move-active' : ''}}" data-index="{{index}}" bindtouchst

  • 微信小程序 实现列表项滑动显示删除按钮的功能

    微信小程序 实现列表项滑动显示删除按钮的功能 微信小程序并没有提供列表控件,所以也没有iOS上惯用的列表项左滑删除的功能,SO只能自己干了. 原理很简单,用2个层,上面的层显示正常的内容,下面的层显示一个删除按钮,就是记录手指滑动的距离,动态的来移动上层元素,当然上层用绝对定位. wxml: <view class="container"> <view class="record-box" data-datetime="{{record.

  • 微信小程序实现滑动删除效果

    最初打算使用scroll-view实现,效果好.流畅.有惯性滑动,但由于滚动条没法去掉.无法实现上下层的帧布局,最终放弃了. 还是自己写个吧,利用手势事件.遗憾的是小程序中目前没有像Android中快速滑动事件,所以,要实现惯性滑动是不可能了. item的布局: 推荐小程序优先使用flex布局,完全够用.这也是微信推荐的. <view wx:for="{{cardTeams}}" wx:for-item="cardTeam" id="{{cardTe

  • 微信小程序实现左滑动删除效果

    最近做微信小程序项目遇到左滑动效果,比如在我的收藏页面,我的历史浏览记录页面,我的购物车页面,大多数都会用到这种效果,我把代码复制出来,供大家参考,用的时候直接用模板,再此基础上修改就行. wxml中的代码: <view class="touch-item {{item.isTouchMove ? 'touch-move-active' : ''}}" data-index=" {{index}}" bindtouchstart="touchstar

  • 微信小程序左右滑动删除事件详解

    本文实例为大家分享了微信小程序左右滑动删除事件,供大家参考,具体内容如下 效果图 上代码 <scroll-view scroll-y enable-back-to-top style="height:{{ scrollHeight }}px" >     <view>         <block wx:for="{{ list }}" wx:for-item="item" wx:for-index="in

  • 微信小程序左右滑动切换页面详解及实例代码

    微信小程序--左右滑动切换页面事件 微信小程序的左右滑动触屏事件,主要有三个事件:touchstart,touchmove,touchend. 这三个事件最重要的属性是pageX和pageY,表示X,Y坐标. touchstart在触摸开始时触发事件; touchend在触摸结束时触发事件; touchmove触摸的过程中不断激发这个事件; 这三个事件都有一个timeStamp的属性,查看timeStamp属性,可以看到顺序是touchstart => touchmove=> touchmov

  • 微信小程序组件之srcoll-view的详解

    微信小程序组件之srcoll-view的详解 今天记录一下scroll-view学习中遇到的问题及解决办法,希望能对其他同学有所帮助. 首先展示一下想达到的效果.↓ vertical scroll实现上下滚动,horizontal实现左右滚动. 先附上wxml的代码. <view class="container"> <view> <text>vertical scroll</text> <scroll-view scroll-y

  • 微信小程序 滚动选择器(时间日期)详解及实例代码

    微信小程序  滚动选择器(时间日期)详解 微信小程序自己封装了很多控件,用起来确实很方便,如果这是Android里面,还需要自己去定义,不废话,效果图: 一起来看看怎么实现的呢?看完你应该就该说,尼玛,这就行啦-. 这个效果呢,要用到picker组件,动画从底部弹起的滚动选择器,现支持三种选择器,通过mode来区分,分别是普通选择器,时间选择器,日期选择器,默认是普通选择器. 看下相应的属性: 具体的来看看代码,布局: <view class="section" > <

  • 微信小程序网络请求wx.request详解及实例

    微信小程序网络请求wx.request详解及实例 如果说小程序API里面最重要一个接口是哪一个?那么首推wx.request().相当于在小程序内请发起一个https请求(本地调试模式下支持HTTP).HTTP协议中共定义了八种方法或者叫"动作"来表明对Request-URI指定的资源的不同操作方式. GET:向特定的资源发出请求. POST:向指定资源提交数据进行处理请求.数据被包含在请求体中. PUT:向指定资源位置上传其最新内容. DELETE:请求服务器删除Request-UR

  • 微信小程序数字滚动插件使用详解

    用es6语法方式写了个微信小程序小插件–数字滚动: 效果图: wxml页面布局代码: <!--pages/main/index.wxml--><view class="animate-number"> <view class="num num1">{{num1}}{{num1Complete}}</view> <view class="num num2">{{num2}}{{num2Co

  • 微信小程序自定义prompt组件步骤详解

    步骤一:新建一个component的文件夹,用来放所有的自定义组件:  步骤二:在该目录下新建一个prompt的文件夹,用来放prompt组件:  步骤三:右击–>新建–>component 直接上代码 wxml <view class="prompt-box" hidden="{{isHidden}}"> <view class="prompt-content contentFontColor"> <v

  • 微信小程序  滚动选择器(时间日期)详解及实例代码

    微信小程序  滚动选择器(时间日期)详解 微信小程序自己封装了很多控件,用起来确实很方便,如果这是Android里面,还需要自己去定义,不废话,效果图: 一起来看看怎么实现的呢?看完你应该就该说,尼玛,这就行啦-. 这个效果呢,要用到picker组件,动画从底部弹起的滚动选择器,现支持三种选择器,通过mode来区分,分别是普通选择器,时间选择器,日期选择器,默认是普通选择器. 看下相应的属性: 具体的来看看代码,布局: <view class="section" > <

  • 微信小程序 本地数据存储实例详解

    微信小程序 本地数据存储实例详解 前言 如果您在看此文章之前有过其他程序的开发经验,那一定会知道一般例如安卓或者苹果的原生APP都提供了本地的存储功能,甚至可以使用sqlite数据库来做存储.可是微信的小程序框架基于微信本身,其实际运行环境只是在浏览器里面,所以不会提供那么丰富的数据存储实力.但html5开始已经可以在浏览器里面存储数据,好在微信的小程序给这个功能封装好了,这样我们可以使用数据存储. 每个微信小程序都可以有自己的本地缓存,可以通过 wx.setStorage(wx.setStor

随机推荐