1添加评论分享收藏感谢收起写回答[教程]玩转微信小程序（六）教你实现分组开发与左滑功能 - 简书
[教程]玩转微信小程序（六）教你实现分组开发与左滑功能
系列教程：
先来看看今天的整体思路：
进入分组管理页面--&点击新建分组新建
进入到未分组页面基本操作
进入到已建分组里面底部菜单栏操作--&从名片夹中添加进行操作。
理清完基本流程我们开始开发。首先整个布局可以先看下，我再一步步讲。
静态布号局后，我们开始实现新增分组效果，当然触发它出现的是
点击取消消失
当里面的输入框内容发生改变时 bindinput 事件，大家别使用 bindchange 事件，这里的 bindchange 事件只有当失去焦点时才会被触发。
当输入框事件发生时，确定按钮会变成可以点击状态，为空时，addTeam
样式数据绑定。
里面有表单就使用了 from。
创建分组请求交互。
创建分组完成，这里可能很多疑问，为什么不使用微信提供的模态框组件来实现，而是自己实现，其实我也很懒，非常想使用自带的模态框组件，但是发现在模态框里面提交表单好像有点麻烦，直接自定义了。
接下来创建好的分组支持左滑删除与重命名，今天重点谈下左滑删除的实现方式。首先需要左滑的是被创建好的分组，未分组是写死的，故而不支持的。
左滑删除使用了两个事件 bindtouchstart 与 bindtouchmove，这里必须绑定它的 id，这个 id 都是不同的，我这使用的用户创建完成后在后台生成的一个 id 号，之后我再 block 出来使用在这里，这个 id 都是唯一的，不能是相同的 id。
样式布局，父元素是绝对定位，子元素删除是相对定位，鉴于动画效果，我这加了 css3 的动画效果，使滑动带点动画效果。
现在我们来看事件构成：Bindtap 点击之后直接是跳转页面。
左滑从触摸事件开始，当然需使用的参数在外面最好先定义一下：
bindtouchStart 发生后，会执行 bindtouchmove 事件，在这里我们可以判断是否左右滑动：
Var dataId = e.currentTarget.id //获取到前面唯一的id；
If(key){ //用户左滑距离很长时会发生多次左滑事件，这里定义一个开关发生第一次之后就关闭它；
Touch是获取触摸点的一些数据，touches 是一个触摸点的数组，每个触摸点包括以下属性：
pageX,pageY：距离文档左上角的距离，文档的左上角为原点 ，横向为 X 轴，纵向为 Y 轴；
screenX,screenY：距离屏幕左上角的距离，屏幕左上角为原点，横向为X轴，纵向为Y轴；
这里使用 clientX,clientY 即可。
我们在 bindtouchstart 时记录到开始的点，在 bindtouchmove 记录到触摸结束的点，如果 X 轴滑动大于 Y 轴的，再如果结束点-开始点小于一个数值（这个数组可以自己设置，鉴于灵敏度，我这设置的很小），右滑也是同理。
判断到左滑与右滑事件后，我们就需要对当前组件绑定数据了，数据从那里来？可以看下我这数组一个来历，以及怎么被左滑事件里面获取到（我这数据是一个数组，需要在 wxml 里面 block 的）。
这时候取到需要的数组，循环出来后，我进行对比，如果数据的 id== 当前被事件操作的 id，那么我给改数组再添加一个 right 向右偏移 15%，否则其他都不偏移，右滑同理，直接全部设置为 0。
最后把数据到绑定到页面上来。
OK，左滑效果实现。
如果出现全部被滚动了，记得在外层加上，X 轴关闭即可。
这时候你点击左滑会出现点透效果，官方文档提供给我们一个 catch，不冒泡点击事件，即可完美解决。
点击删除事件弹出模态框供用户确定是否删除。
这里你点击取消时还要记得把左滑删除按钮去掉可能用户体验会好点。
这里表单提交数据转换有点复杂（大家根据业务需求来做，不必花时间研究这里的方法），获取的是数组，按照后台需要的数据格式进行转换传递过去。
今天再回去理下首页 A、B、C 定点跳转功能实现方法。
首先是右边小索引布局以及数据绑定，数据绑定和名片夹列表上的字母一样，该字母下面有名片则渲染出来，没有则不需要渲染，id同样是当前字母与右边显示的内容一样：
数据 sort，和 group.name 数据一样：
这里是因为 # 不支持设为 id（就是 id=”#”），故而进行了一个转化。
点击事件：获取到当前 ID，以及绑定数据 toView 为当前 ID。
一定记得在
data({modalHidden:true})
不然会出现一加载页面即出现了模态框。
点击未分组按钮进入到未分组名片列表页面。
这个布局完全是 copy 首页过来的，后面只是数据接口有变而已，大家有兴趣可以回过去看下前面的。
点击多选，会出现多选框和下面的一些操作按钮。都是些数据绑定，显示与隐藏类的实现比较简单。
多选我们直接给 checked 设置 Boole 开关。
用户已建分组点击进去的是点击顶部菜单按钮出现下拉菜单栏，这里直接使用微信提供的组件。
最后点击从名片夹中添加进入到以下页面：
整个布局基本还是和首页面差不多，这里不再多讲，
顶部菜单直接多选绑定数据即可。
牵扯到表单类的基本全都是 from 表单提交事件。
除小部分接口方面欠缺外，写到这里其实分组前端方面效果基本实现。
好了，由于目前小程序开发工具图片上传还有点问题，拍照收纳无法实现，所以微信小程序开发教程也先暂告一段落，等开发工具更新稳定后，我还会再追加教程的内容，有机会的话把成品也给大家看看。
感谢朋友们一直以来的支持和关心，大家可以拿这个教程作为参考，摸索出自己的小程序开发套路。
大家多多在咱们的 QQ 群内交流吧，群里每天都会有很多朋友交换代码、答疑解惑，对大家的开发和学习很有帮助。
将与您共同成长。微信号： QQ群：
Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具（例如配置管理，服务发现，断路器，智能路由，微代理，控制总线）。分布式系统的协调导致了样板模式, 使用Spring Cloud开发人员可以快速地支持实现这些模式的服务和应用程序。他们将在任何分布式...
用两张图告诉你，为什么你的 App 会卡顿? - Android - 掘金Cover 有什么料？ 从这篇文章中你能获得这些料： 知道setContentView()之后发生了什么？ ... Android 获取 View 宽高的常用正确方式，避免为零 - 掘金相信有很多朋友...
用两张图告诉你，为什么你的 App 会卡顿? - Android - 掘金 Cover 有什么料？ 从这篇文章中你能获得这些料： 知道setContentView()之后发生了什么？ ... Android 获取 View 宽高的常用正确方式，避免为零 - 掘金 相信有很多...
百战程序员_ Java1573题 QQ群：034603 掌握80%年薪20万掌握50%年薪10万 全程项目穿插, 从易到难，含17个项目视频和资料持续更新，请关注www.itbaizhan.com 国内最牛七星级团队马士兵、高淇等11位十年开发经验专...
今天从早上醒来，能量一直都很低，乱乱的，一直去发现今天自己身上有什么优点，一直想不到，缠绕着的各种关系，说实话自己想逃避了，但是内心有一个声音下去，这样的结果是什么？你想要这样的结果吗？你真的想要这样的结果吗？静静地思考下去，刚开始还是没有结果，各种乱七八糟的关系，自己跟目...
曾经的我们 曾经的英雄 跨过长河大海豪情豪迈 飞跃高山平原遨游四海 岁月把人摔打了 剩下干瘪的躯肢 血肉丰满的青春啊 经不住时光的吮吸 蓦然回首却发现 记忆渐渐丰满了起来 积攒了诸多的残缺 以及无能为力的凄惶 慢慢的，祈祷多了起来 唯剩了祈祷 渐渐的皈依 那主宰的神
话不多说,先贴代码 这段代码主要实现的功能是点击一个按钮,弹出一个全屏的遮罩,遮罩上有一个 Scrollview(在这里是 bgView),scrollview 里有几个子视图,在遮罩出现的时候, scrollview 要有一个高度从0变到某个值的动画. 在未写下面这句代码...android 象微信消息界面，向左滑移显示删除按钮怎么做的？_百度知道
android 象微信消息界面，向左滑移显示删除按钮怎么做的？
我有更好的答案
1.自定义一个listviewimport android.content.Cimport android.util.AttributeSimport android.view.MotionEimport android.widget.ListV public class FilpperListvew extends ListView{
private float orginX,orginY,apartX,apartY,curX,curY;
private boolean delete =
private int itemHeight =50;
private int ratio = 1;
private FilpperDeleteListener filpperDeleterL
public FilpperListvew(Context context) {
super(context);
public FilpperListvew(Context context, AttributeSet attrs){
super(context, attrs);
//触发移动事件
public boolean onTouchEvent(MotionEvent ev) {
switch (ev.getAction()){
//记录按下的瞬间的坐标主要是初始化坐标数据，方便以后计算移动的距离
case MotionEvent.ACTION_DOWN:
int temp = getChildCount();
itemHeight = (temp==0)?itemHeight:getChildAt(0).getHeight();
orginX = ev.getX(0);
orginY = ev.getY(0);
curX = orginX;
curY = orginY;
if (filpperDeleterListener != null) {
filpperDeleterListener.getMoveY(curX, curY);
//移动监听动态位置坐标的移动处理
case MotionEvent.ACTION_MOVE:
float deltaX = ev.getX(ev.getPointerCount() - 1) - orginX;
//float deltaY = Math.abs(ev.getY(ev.getPointerCount() - 1) - orginY);
apartX = ev.getX()-curX;
apartY = ev.getY()-curY;
curX = ev.getX();
curY = ev.getY();
//手指触摸的上下距离不能太大(即水平移动)
if(apartX & 0 && -20 & apartY && apartY & 20){
if(itemHeight&apartY && filpperDeleterListener != null){
filpperDeleterListener.onFlipping(orginX,orginY,apartX,apartY);
if (Math.abs(deltaX) & this.getWidth() / ratio) {
//主要是移动距离之后判断移动的位置是回原来的位置，还是移动到值得的位置(这些的操作都是的listview中实现具体的位置移动)
case MotionEvent.ACTION_UP:
if (delete && filpperDeleterListener != null) {
filpperDeleterListener.restoreView(curX, curY,true);
//判断是否符合移动的条件
if(!delete){
if(filpperDeleterListener != null){
filpperDeleterListener.restoreView(orginX,orginY,false);
return super.onTouchEvent(ev);
public void reset(){
orginX = -1 ;
orginY = -1 ;
public void setFilpperDeleteListener(FilpperDeleteListener f, int r) {
filpperDeleterListener =
public interface FilpperDeleteListener {
//方法说明控制上下移动的位置
public void getMoveY(float moveX, float moveY);
//移动位置的具体的接口
public void onFlipping(float xPosition,float yPosition,float apartX,float apartY);
//最后的接口用来item最后的位置是否改变
public void restoreView(float x,float y, boolean tag);
public int getItemHeight() {
return itemH
} 2.在activity的主布局中声明listview
&relativelayout android:id=&@+id/activity_list_rl& android:layout_height=&fill_parent& android:layout_width=&fill_parent&&
&cn.zan.control.view.filpperlistvew android:id=&@+id/filpperlistview& android:layout_height=&fill_parent& android:layout_width=&fill_parent& android:scrollbars=&none& android:divider=&#& android:dividerheight=&2dp& android:listselector=&#& android:fadingedge=&none& android:cachecolorhint=&#&&
&/cn.zan.control.view.filpperlistvew& 3.在activity中声明listview flipperListView = (FilpperListvew)findViewById(R.id.filpperlistview);
4.适配器的调用myAdapter = new myAdapter(myActivity.this, myList);if (flipperListView != null) {
flipperListView.setAdapter(myAdapter);
myAdapter.notifyDataSetChanged();
flipperListView.setFilpperDeleteListener(new FilpperDeleteListener() {
int moveX;
int moveY;
public void getMoveY(float moveXx, float moveYy) {
moveY = (int)moveYy;
moveX = (int)moveXx;
public void onFlipping(float xPosition, float yPosition,float apartX, float apartY) {
int index = flipperListView.pointToPosition((int)xPosition, moveY);
if(index &= 0){
int firstVisible = flipperListView.getFirstVisiblePosition();
View v = flipperListView.getChildAt(index-firstVisible);
RelativeLayout my_adapter_linear1 = (RelativeLayout) v.findViewById(R.id.my_adapter_linear1);
//临时移动几像素apartX(起始位置到终点位置)
int temp = (int)apartX;
if(my_adapter_linear1 != null){
//moveX = moveX +
System.out.println(&moveX=======&+moveX);
System.out.println(&temp: & + temp);
//手机屏幕的像素转换dip2px，超过65像素禁止向左移动
if(Math.abs(temp) & ActivityUtil.dip2px(context, 65)){
my_adapter_linear1.scrollBy(-temp, 0);
public void restoreView(float x, float y, boolean tag) {
// 获取需要移动的listview项
int index = flipperListView.pointToPosition((int)x, moveY);
if(index &= 0){
int firstVisible = flipperListView.getFirstVisiblePosition();
View v = flipperListView.getChildAt(index-firstVisible);
for (int i = 0; i & myList.size(); i++) {
myList.get(i).put(&isDelSign&, &false&);
RelativeLayout my_adapter_linear1 = (RelativeLayout) v.findViewById(R.id.my_adapter_linear1);
myList.get(index).put(&isDelSign&, &true&);
Integer listview_num = flipperListView.getChildCount();
for(int i = 0; i & listview_ i ++){
View view2 = flipperListView.getChildAt(i);
RelativeLayout my_adapter_linear2 = (RelativeLayout) view2.findViewById(R.id.my_adapter_linear1);
if (my_adapter_linear2 != null) {
my_adapter_linear1.scrollTo(0, 0);
my_adapter_linear1.scrollTo(ActivityUtil.dip2px(context, 65), 0);
myList.get(index).put(&isDelSign&, &false&);
if (my_adapter_linear1 != null) {
my_adapter_linear1.scrollTo(0, 0);
moveX = 0;
采纳率：73%
来自团队：
google下SwipeListView，显示消息条数可以google下android-viewbadger
本回答被提问者采纳
google下SwipeListView，显示消息条数可以google下android-viewbadger
动态添加消息条数可以使用textview,删除按钮貌似可以用slidingdrawer
其他1条回答
为您推荐：
其他类似问题
android的相关知识
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。下载最新、正版的墨刀官方客户端
您的浏览器版本过低，推荐您下载 Windows 版墨刀桌面客户端或使用谷歌浏览器最新版本，可以获得最佳使用体验
在线编辑、实时预览、与网页同步
墨刀也提供了 ，，， 和【求助】如何做到像微信左划出现删除按钮【android开发吧】_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0成为超级会员，使用一键签到本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：125,217贴子：
【求助】如何做到像微信左划出现删除按钮收藏
来人啊，这个问题我都纠结了好几天了
android开发,快速制作iOS和安卓App,上线快,海量模块,满足您的个性化开发需求.android开发,强大的用户行为分析库,数据安全,稳定可靠.免费试用.
“I am an angel, and the reason why I can not go back to heaven is the problem of my weight. 我是天使，回不去天堂是因为体重的原因。”
精品帖子里有。可以参考一下。也可以优化更好。
这个的思路是:你可以一开始设计视图的时候有这个选项,但是属性visibility设置为gone,当用户点击的时候设置为可见,就可以了
效果图如上。然后布局我用的不是listview来实现的。我用的是addview,所以没有牵扯到listview。。。谁能告诉我。。三条横线后的那个删除怎么拖出来
邮箱，我发给你demo
微信没有左滑 删除
登录百度帐号