微信小程序实现左滑删除效果(原生/uni-app)
实现效果
- 列表中侧滑删除
- 删除不同时存在
- scrollview上下滑动与侧滑删除不影响
uni-app实现
html部分
<template>
<scroll-view :scroll-y="isScroll" :style="{ height: windowHeight + 'px' }">
<block :key="index" v-for="(item, index) in dataList">
<view :data-index="index" class="order-item" @touchstart="drawStart" @touchmove="drawMove" @touchend="drawEnd" :style="{ right: item.right + 'rpx' }">
<view class="content">{{ item.content }}</view>
<view class="remove" @click="delItem">删除</view>
</view>
</block>
</scroll-view>
</template>
js部分
<script>
export default {
data() {
return {
delBtnWidth: 160,
dataList: [
{ content: '1', right: 0 },
{ content: '2', right: 0 },
{ content: '3', right: 0 },
{ content: '4', right: 0 },
{ content: '5', right: 0 },
{ content: '6', right: 0 },
{ content: '7', right: 0 },
{ content: '8', right: 0 },
{ content: '9', right: 0 },
{ content: '10', right: 0 }
],
isScroll: true,
windowHeight: 0
};
},
onLoad: function(options) {
var that = this;
wx.getSystemInfo({
success: function(res) {
that.windowHeight = res.windowHeight;
}
});
},
methods: {
drawStart: function(e) {
// console.log("drawStart");
var touch = e.touches[0];
for (var index in this.dataList) {
this.dataList[index].right = 0;
}
this.startX = touch.clientX;
},
drawMove: function(e) {
var touch = e.touches[0];
var item = this.dataList[e.currentTarget.dataset.index];
var disX = this.startX - touch.clientX; if (disX >= 20) {
if (disX > this.delBtnWidth) {
disX = this.delBtnWidth;
}
this.isScroll = false;
this.dataList[e.currentTarget.dataset.index].right = disX;
} else {
this.isScroll = true;
this.dataList[e.currentTarget.dataset.index].right = 0;
}
},
drawEnd: function(e) {
var item = this.dataList[e.currentTarget.dataset.index];
if (item.right >= this.delBtnWidth / 2) {
this.isScroll = true;
this.dataList[e.currentTarget.dataset.index].right = this.delBtnWidth;
} else {
this.isScroll = true;
this.dataList[e.currentTarget.dataset.index].right = 0;
}
},
delItem() {
console.log('删除');
}
}
};
</script>
css样式
<style scoped>
.order-item {
height: 240rpx;
width: 100%;
display: flex;
position: relative;
} .remove {
width: 160rpx;
height: 100%;
background-color: red;
color: white;
position: absolute;
top:;
right: -160rpx;
display: flex;
justify-content: center;
align-items: center;
}
</style>
小程序原生开发
html部分
<scroll-view scroll-y="{{isScroll}}" style='height:{{windowHeight}}px'>
<block wx:key="item" wx:for="{{data}}">
<view data-index='{{index}}' class="order-item" bindtouchstart="drawStart" bindtouchmove="drawMove" bindtouchend="drawEnd" style="right:{{item.right}}rpx">
<view class="content">{{item.content}}</view>
<view class="remove" bindtap="delItem">删除 </view>
</view>
</block>
</scroll-view>
js部分
Page({
data: {
delBtnWidth:160,
data: [{ content: "1", right: 0 }, { content: "2", right: 0 }, { content: "3", right: 0 }, { content: "4", right: 0 }, { content: "5", right: 0 }, { content: "6", right: 0 }, { content: "7", right: 0 }, { content: "8", right: 0 }, { content: "9", right: 0 }, { content: "10", right: 0 }],
isScroll:true,
windowHeight:0,
},
onLoad: function (options) {
var that = this;
wx.getSystemInfo({
success: function (res) {
that.setData({
windowHeight: res.windowHeight
});
}
});
},
drawStart: function (e) {
// console.log("drawStart");
var touch = e.touches[0] for(var index in this.data.data) {
var item = this.data.data[index]
item.right = 0
}
this.setData({
data: this.data.data,
startX: touch.clientX,
}) },
drawMove: function (e) {
var touch = e.touches[0]
var item = this.data.data[e.currentTarget.dataset.index]
var disX = this.data.startX - touch.clientX if (disX >= 20) {
if (disX > this.data.delBtnWidth) {
disX = this.data.delBtnWidth
}
item.right = disX
this.setData({
isScroll: false,
data: this.data.data
})
} else {
item.right = 0
this.setData({
isScroll: true,
data: this.data.data
})
}
},
drawEnd: function (e) {
var item = this.data.data[e.currentTarget.dataset.index]
if (item.right >= this.data.delBtnWidth/2) {
item.right = this.data.delBtnWidth
this.setData({
isScroll: true,
data: this.data.data,
})
} else {
item.right = 0
this.setData({
isScroll: true,
data: this.data.data,
})
}
}, delItem: function (e) {
console.log(e)
}
})
css部分
.order-item {
height: 240rpx;
width: 100%;
display: flex;
position: relative;
}
.remove {
width: 160rpx;
height: 100%;
background-color: red;
color: white;
position: absolute;
top:;
right: -160rpx;
display: flex;
justify-content: center;
align-items: center;
}
参考链接:https://www.jianshu.com/p/f9cc446fd328
微信小程序实现左滑删除效果(原生/uni-app)的更多相关文章
- 微信小程序实现左滑删除源码
左滑删除效果在app的交互方式中十分流行,比如全民应用微信 微信左滑删除 再比如曾引起很大反响的效率app Clear Clear左滑删除 从技术上来说,实现这个效果并不困难,响应一下滑动操作,移动一 ...
- 微信小程序实现标签页滑块效果
微信小程序实现标签页滑块效果 小程序完整代码: wxml: <view class="swiper-tab"> <view class="swiper- ...
- 微信小程序里实现跑马灯效果
在微信小程序 里实现跑马灯效果,类似滚动字幕或者滚动广告之类的,使用简单的CSS样式控制,没用到JS wxml: <!-- 复制的跑马灯效果 --> <view class=&quo ...
- Taro UI开发小程序实现左滑喜欢右滑不喜欢效果
前言:年后入职了一家新公司,与前同事交接完之后,发现公司有一个四端的项目(iOS,Android,H5,小程序),iOS和安卓都实现了左滑右滑的效果,而h5和小程序端没实现,询问得知前同事因网上没找到 ...
- 微信小程序实现左侧滑栏
前言 一直想给项目中的小程序设置侧滑栏,将退出按钮放到侧滑中,但是小程序没有提供相应的控件和API,因此只能自己手动实现,网上很多大神造的轮子很不错,本文就在是站在巨人的肩膀上实现. 效果 先看看效果 ...
- 微信小程序:scroll滑到指定位置
概述 这是我开发微信小程序遇到的坑中的一个,专门记录下来,供以后开发时参考,相信对其他人也有用. scroll滑到指定位置,有两种解决方案,一种是用scroll-view标签,另一种是用wx.page ...
- 图解微信小程序---实现行的删除和增加操作
图解微信小程序之实现行的删除和增加操作 代码笔记部分 第一步:在项目的app.json中创建一个新的页面(页面名称英文,可自定义) 第二步:在创建的新页面中编写页面(注意bindtap属性值,因为是我 ...
- 使用zepto实现QQ消息左滑删除效果
有这样一个需求: 1. 有一个列表,将每一个列表项左滑动出现删除按钮: 2. 右滑动隐藏删除按钮: 3. 点击这个删除按钮删除该列表项. 完成以后的效果: 这是微信网页端的页面,使用的是 zepto ...
- 微信小程序:上滑触底加载下一页
给商品列表页面添加一个上滑触底加载下一页的效果,滚动条触底之后就发送一个请求,来加载下一页数据, 先在getGoodsList中获取总条数 由于总页数需要再另外的一个方法中使用,所以要把总页数变成一个 ...
随机推荐
- day18-Python运维开发基础(单继承 / 多继承 / 菱形继承、类的多态)
1. 单继承 / 多继承 / 菱形继承 # ### 继承 : 一个类除了自身所拥有的属性方法之外,还获取了另外一个类的成员属性和方法 """ 一个类可以继承另外一个类,那 ...
- Android。WebView加载UR请求使用Cookie储存User_Id记录用户是否登陆过
1.WebView初始化的时候用倒如下代码: if (Build.VERSION.SDK_INT >= 21) { CookieManager.getInstance().setAcceptTh ...
- [原]JointJS流程图
最近项目上需要用流程图来做问题定界分析,之前有同事用jsPlumb做过,但是阅读代码后觉得比较麻烦,所以自己又找了一圈,找到一个叫Dagre-D3的开源类库,画出来的效果如下图,Dagre-D3最大的 ...
- Centos7 nginx 反向代理的配置
一.正向代理与反向代理 1.正向代理 正向代理往VPN理解 正向代理,也就是传说中的代理,他的工作原理就像一个跳板(VPN),简单的说: 我是一个用户,我访问不了某网站,但是我能访问一个代理服务器,这 ...
- 本周总结(19年暑假)—— Part1
日期:2019.7.14 博客期:107 星期日 这几周正在摸索着找寻与大型数据库相关的知识,重装了电脑,配置了虚拟机的环境,继续研究了几下修改器.
- pip使用镜像的方法
http://e.pypi.python.org/这个就是官网了,清华大学提供的 建议非清华大学校内的使用这个镜像: http://e.pypi.python.org/simple(这也是一个http ...
- 【转载】如何快速转载CSDN中的博客
前言 对于喜欢逛CSDN的人来说,看别人的博客确实能够对自己有不小的提高,有时候看到特别好的博客想转载下载,但是不能一个字一个字的敲了,这时候我们就想快速转载别人的博客,把别人的博客移到自己的空间 ...
- primecoin 全节点日常维护操作
primecoin 全节点日常维护操作: 一.关于primecoin维护,每天检查这6个地址是否能正常访问: http://api.primecoin.org/rest/pcoin/syncblock ...
- Python字符串(一)
一.get char 1.获取单个字符 字符串中的每一个字符都会对应一个唯一的下标(索引)用来表示字符串中的位置.下标从0开始依次增加:0对应的是第一个字符:也可以从从-1开始依次减小,-1代表最后一 ...
- MariaDB——SQL语句分类汇总
常用SQL语句汇总 SQL语句在所有的关系型数据库中都是通用的,算起来sql语句也是一门语言,只不过这门语言的主要操作对象是关系型的数据库,其中最常用的还是查询相关的语句. sql语句主要分为: DQ ...