weex下实现列表项左滑菜单

最新推荐文章于 2021-07-27 18:12:58 发布

kormondor

最新推荐文章于 2021-07-27 18:12:58 发布

阅读量2.4k

点赞数 1

分类专栏： weex 文章标签： weex 滑动菜单列表 APP

本文链接：https://blog.csdn.net/kormondor/article/details/79660218

版权

本文记录了在Weex中实现列表项左滑显示编辑和删除菜单的功能，包括详细步骤和解决多菜单同时显示的问题。通过监听手势事件，结合Weex的内置animation模块完成滑动动画。在左滑事件中，通过判断滑动方向，动态调整元素位置。在确保每次只显示一个菜单的逻辑中，优化了状态管理，避免了多个菜单同时展开的情况。

摘要由CSDN通过智能技术生成

最近项目中遇到的需求，由于初次接触weex,故做以记录，如有任何不明或错误，欢迎指出。

这里写图片描述

在收货地址的列表的某一项上左滑就显示出该项的编辑和删除菜单。

实现功能

左滑每一项显示该项的菜单
在列表中右滑隐藏显示的菜单
每次只能显示一项的菜单，打开第二项菜单的同时关闭第一项

实现过程

思路是：将每一项的长度设置为页面宽度＋300px(1334*750的设计图)，即每一项的宽度为1050px。

页面结构如下：

 <scroller class="address__container">
            <div class="address__item" ref="menuItem"  v-for="(item,index) in list" @swipe="slideMenu($event,index)" :key="index" @click="chooseItem(item.id)">
                <div class="address__item__info">
                    <div class="addredd__item__info__top">
                        <text class="fs14 mr4">收货人</text>
                        <text class="fs14 mr4">XXXXXXXX</text>
                        <text class="fs16" style="height:50px;line-height:35px;">131 1313 1313</text>
                    </div>
                    <div class="address__item__info__bottom">
                        <text class="fs12">某某省某某市某某区</text>
                    </div>
                </div>
                <