网络编程
位置:首页>> 网络编程>> JavaScript>> 微信小程序左滑删除功能开发案例详解

微信小程序左滑删除功能开发案例详解

作者: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
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com