这篇文章主要为大家展示了微信小程序如何实现滑动,内容简而易懂,希望大家可以学习一下,学习完之后肯定会有收获的,下面让小编带大家一起来看看吧。
创新互联专注于企业全网营销推广、网站重做改版、宁河网站定制设计、自适应品牌网站建设、H5场景定制、成都做商城网站、集团公司官网建设、外贸营销网站建设、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为宁河等各大城市提供网站开发制作服务。前言
本文使用动画组件wx.createAnimation来实现滑动操作:
1. 左滑动显示操作项区域;
2. 点击操作项触发相应方法;
3. 右滑动和点击行收起操作项;
4. 点击“删除”并确定则删除该条数据。
最终效果如下:
实现过程
1. 文件index.wxml和index.wxss代码如下,这一块比较简单,可自行查看,不做过多分析;
Tips:“详情”、“取号”和“删除”点击触发使用catchtap,阻止冒泡事件向上冒泡;
{{item.title}} 预约时间:{{item.date}} 状态: {{item.status}} 详情 取号 删除