react-native 实现购物车滑动删除效果的示例代码


Posted in Javascript onJanuary 15, 2021

购物车的功能基本上电商项目都会有的,这是一篇关于react-native的,原生android的已经好久没写了。记得以前写原生购物车的时候,遇到过产品的灵魂质问,为啥iOS的滑动删除可以,android却那么难实现的。这个时候,我就打开微信说,android的微信版也是长按进行操作,iOS的是滑动操作的,两个平台自带的系统交互操作是不一样的。当然,最后还是默默的找各种三方库去进行滑动删除。

rn的项目也是找的网上的一个三方库进行列表滑动操作的,github地址react-native-swipe-list-view

最基本的使用方法和flatList差不多,data 属性数组数据源,renderItem 从data中挨个取出数据并渲染到列表中

<SwipeListView
  data={this.state.listViewData}
  renderItem={this.renderItem}
  keyExtractor={this.keyExtractor}
/>

这时候是不可以左右滑动的,就跟普通的flatList效果一样。加上renderHiddenItem属性,可以左右滑动。renderHiddenItem渲染的就是隐藏的内容,隐藏的内容位置是通过flex布局来控制,下面这个例子使用横向布局,通过space-between将内容控制在左右两边,形成了左右滑动时出现隐藏内容。

//这是左右都可以滑动的
renderHiddenItem = (data, rowMap) => {
  return <View style={{
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between'
  }}>
    <Text>Left</Text>
    <Text>Right</Text>
  </View>
}

我们这边只需要可以左滑,通过justifyContent: 'flex-end'属性将删除按钮内容置于最右边,同时设置SwipeListView的属性disableRightSwipe来禁止右滑操作。

renderHiddenItem = (data, rowMap) => {
  return <View style={{
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'flex-end',
  }}>
    <TouchableOpacity style={{
      backgroundColor: '#FF496C',
      width: 80,
      justifyContent: 'center',
      alignItems: 'center'
    }}>
      <Text style={{color:'#fff'}}>删除</Text>
    </TouchableOpacity>
  </View>
}

这个时候向左滑,可以看到右边的删除按钮出来了,但是没有一直处于打开状态,还需要添加rightOpenValue={-80}属性,使其处于打开状态。

<SwipeListView
  disableRightSwipe
  data={this.state.listViewData}
  renderItem={this.renderItem}
  keyExtractor={this.keyExtractor}
  renderHiddenItem={this.renderHiddenItem}
  rightOpenValue={-80}
/>

另外有一个需要注意的是,renderItem进行列表渲染时,最外层的视图,官方推荐使用可点击响应触摸的,而不是<View/>,正常情况是,打开了一个视图,点其他视图,默认会关闭打开的那一项,如果最外层是<View/>则不会有这种效果。

//最外层是 TouchableHighlight
renderItem = ({item, index}, rowMap) => {
  return <TouchableHighlight
    onPress={() => {
    }}
    underlayColor={'#fff'}>
    ...
  </TouchableHighlight>
}

至此,滑动删除的效果已经基本满足了,后续就是业务逻辑,增删操作数据源刷新页面了。

react-native 实现购物车滑动删除效果的示例代码

到此这篇关于react-native 实现购物车滑动删除效果的示例代码的文章就介绍到这了,更多相关react-native 滑动删除内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
event.keyCode键码值表 附只能输入特定的字符串代码
May 15 Javascript
jQuery对象和DOM对象的相互转化实现代码
Mar 02 Javascript
用方法封装javascript的new操作符(一)
Dec 25 Javascript
jQuery处理xml格式的返回数据(实例解析)
Nov 28 Javascript
多种方式实现js图片预览
Dec 12 Javascript
JS实现PC手机端和嵌入式滑动拼图验证码三种效果
Feb 15 Javascript
vue语法之拼接字符串的示例代码
Oct 25 Javascript
原生JS实现逼真的图片3D旋转效果详解
Feb 16 Javascript
JavaScript深入V8引擎以及编写优化代码的5个技巧
Jun 24 Javascript
关于微信小程序map组件z-index的层级问题分析
Jul 09 Javascript
vue-router之解决addRoutes使用遇到的坑
Jul 19 Javascript
浅谈 JavaScript 沙箱Sandbox
Nov 02 Javascript
vue element el-transfer增加拖拽功能
Jan 15 #Vue.js
关于uniApp editor微信滑动问题
Jan 15 #Javascript
关于javascript中的promise的用法和注意事项(推荐)
Jan 15 #Javascript
详解node.js创建一个web服务器(Server)的详细步骤
Jan 15 #Javascript
JavaScript中展开运算符及应用的实例代码
Jan 14 #Javascript
js中延迟加载和预加载的具体使用
Jan 14 #Javascript
JS中箭头函数与this的写法和理解
Jan 14 #Javascript
You might like
php 数组排序 array_multisort与uasort的区别
2011/03/24 PHP
基于php设计模式中工厂模式详细介绍
2013/05/15 PHP
浅析php与数据库代码开发规范
2013/08/08 PHP
让PHP显示Facebook的粉丝数量方法
2014/01/08 PHP
php实现zip压缩文件解压缩代码分享(简单易懂)
2014/05/10 PHP
ThinkPHP自动填充实现无限级分类的方法
2014/08/22 PHP
PHP实现实时生成并下载超大数据量的EXCEL文件详解
2017/10/23 PHP
下载网站打开页面后间隔多少时间才显示下载链接地址的代码
2010/04/25 Javascript
jquery ajax提交整个表单元素的快捷办法
2013/03/27 Javascript
jquery子元素过滤选择器使用示例
2013/06/24 Javascript
javascript实现原生ajax的几种方法介绍
2013/09/21 Javascript
JavaScript中的cacheStorage使用详解
2015/07/29 Javascript
JavaScript判断DIV内容是否为空的方法
2016/01/29 Javascript
分享JS代码实现鼠标放在输入框上输入框和图片同时更换样式
2016/09/01 Javascript
jQuery基本选择器之标签名选择器
2016/09/03 Javascript
Node.js制作简单聊天室
2017/01/12 Javascript
Javascript设计模式之装饰者模式详解篇
2017/01/17 Javascript
JS简单判断函数是否存在的方法
2017/02/13 Javascript
JS获取月的第几周和年的第几周实例代码
2018/12/05 Javascript
vue表单数据交互提交演示教程
2019/11/13 Javascript
JavaScript中如何调用Java方法
2020/09/16 Javascript
在vue中实现某一些路由页面隐藏导航栏的功能操作
2020/09/21 Javascript
JavaScript 实现轮播图特效的示例
2020/11/05 Javascript
简单文件操作python 修改文件指定行的方法
2013/05/15 Python
Python实现解析Bit Torrent种子文件内容的方法
2017/08/29 Python
微信跳一跳python辅助软件思路及图像识别源码解析
2018/01/04 Python
DES加密解密算法之python实现版(图文并茂)
2018/12/06 Python
Python实现图片添加文字
2019/11/26 Python
Python +Selenium解决图片验证码登录或注册问题(推荐)
2020/02/09 Python
python 一维二维插值实例
2020/04/22 Python
Python 程序员必须掌握的日志记录
2020/08/17 Python
商务日语毕业生自荐信范文
2013/11/14 职场文书
社区爱国卫生月活动总结
2014/06/30 职场文书
英语专业毕业论文答辩开场白
2015/05/27 职场文书
《日月潭》教学反思
2016/02/20 职场文书
导游词之河北野三坡
2019/12/11 职场文书