微信小程序左滑删除功能开发案例详解
作者:Jnst 发布时间:2024-04-28 09:37:21
标签:微信小程序,左滑,删除
直接进入正题,我们需要做的就是通过手指滑动列表项后,右侧出现删除;
比如说像这样:
向左边滑动后出现如下的效果:
开始撸代码~
假设我们有N个列表项来自一个数组list,先确定基本的结构
<view class="list" wx:for="{{list}}" wx:key>
<view class="item">
<view class="wrap">{{item}}</view>
<view class="delete"><text>删除</text></view>
</view>
</view>
在item中分别放入wrap作为显示项目内容的容器,与delete删除按钮的容器。
当我们手指向左滑动wrap时,wrap容器向左移动;此时delete从wrap容器之后显示出来;换句话说我们喜欢wrap容器盖住delete,使wrap默认在delete上方。
没错,我们用样式来实现效果。
.item{ position:relative; }
.wrap{
position:absolute;z-index:2; top:0;left:0;
backgorund:#fff;width:100%;height:100%;
}
.delete{ position:absolute;z-index:1; top:0;right:0;width:120rpx;height:100%;}
来源:https://segmentfault.com/a/1190000016977022
0
投稿
猜你喜欢
- 这里用Python逼近函数y = exp(x);同样使用泰勒函数去逼近:exp(x) = 1 + x + (x)^2/(2!) + .. +
- 本文实例讲述了JQuery中serialize()用法。分享给大家供大家参考。具体分析如下:一、serialize()定义和用法:seria
- 准备工作:MyEclipse使用的是2013版,mysql Ver 14.14 Distrib 5.6.281.jar包的下载(jdbc驱动
- 时隔一年,重拾python,想在pycharm里面使用jupyter完成一些小demo,结果一年后的jupyter死活没有token,连都连
- 一:手写数字模型构建与保存1 加载数据集# 1加载数据digits_data = load_digits()可以先简单查看下 手写数字集,如
- 很多网站登录登陆时都要用到滑块验证码,在某些场景例如使用爬虫爬取信息时常常受到阻碍,想着用opencv的模板匹配试试能不能实现模拟登陆。本来
- function geturl($url) { $ch = curl_init(); $timeout = 5; curl_setopt($
- 问题:1.一个销售系统,设有各级代理商,每个代理商的表是这样设计的 数据库结构表1: 代理商资料表[id]
- 这是我对以前配置的基于vue-cli3搭建的前端H5模板的升级,主要把vue-cli3项目升级为vue-cli4,并删除一些过时插件。插件版
- 需 求 分 析 1、读取指定目录下的所有文件2、读取指定文件,输出文件内容3、创建一个文件并保存到指定目录实 现 过 程Python写代码简
- 如下所示:f = open('./val.txt')lines = f.readlines() #整行读取f.close()
- 在SQL语句中如果定义字符串,则字符串必须使用“'”就是单引号进行声明,但是如果现在所操作的数据库本身含有“'”单引号,就会
- 逻辑比较简单 ,直接上代码 定时发送直接使用了win服务器的定时任务来定时执行脚本#coding:utf-8from __futu
- 方案一func md5V(str string) string { h := md5.New() &n
- 切片主要用于序列对象中,按照索引区间截取出一段索引的内容。切片的书写形式:[i : i+n : m] ;其中,i 是切片的起始索引值,为列表
- 我们知道IE6是不支持透明的PNG的,这无疑限制了网页设计的发挥空间.然而整个互联网上解决这个IE6的透明PNG的方案也是多不胜数,从使用I
- 问题定义一个int型的一维数组,包含40个元素,用来存储每个学员的成绩,循环产生40个0~100之间的随机整数,(1)将它们存储到一维数组中
- 1、使用+加号+加号是将两个list列表相加,返回一个新的列表对象,会消耗额外的内存。#!/usr/bin/env python# -*-
- 二维数组二维数组本质上是以数组作为数组元素的数组,即“数组的数组”,类型说明符 数组名[常量表达式][常量表达式]。二维数组又称为矩阵,行列
- NumPy矩阵乘法矩阵乘法是将两个矩阵作为输入值,并将 A 矩阵的行与 B 矩阵的列对应位置相乘再相加,从而生成一个新矩阵,如下图所示:注意