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 相关文章推荐
JQuery 小练习(实例代码)
Aug 07 Javascript
Javascript 面向对象之重载
May 04 Javascript
js 实现菜单上下显示附效果图
Nov 21 Javascript
让JavaScript和其它资源并发下载的方法
Oct 16 Javascript
Javascript中的匿名函数与封装介绍
Mar 15 Javascript
简介JavaScript中的unshift()方法的使用
Jun 09 Javascript
javascript 中的console.log和弹出窗口alert
Aug 30 Javascript
AngularJS 中使用Swiper制作滚动图不能滑动的解决方法
Nov 15 Javascript
vue.js中指令Directives详解
Mar 20 Javascript
Vue 父子组件的数据传递、修改和更新方法
Mar 01 Javascript
JavaScript创建防篡改对象的方法分析
Dec 30 Javascript
vue 动态组件(component :is) 和 dom元素限制(is)用法说明
Sep 04 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与ASP
2006/10/09 PHP
php 数组二分法查找函数代码
2010/02/16 PHP
用C/C++扩展你的PHP 为你的php增加功能
2012/09/06 PHP
探讨GDFONTPATH能否被winxp下的php支持
2013/06/21 PHP
ECMall支持SSL连接邮件服务器的配置方法详解
2014/05/19 PHP
php采集自中央气象台范围覆盖全国的天气预报代码实例
2015/01/04 PHP
为百度UE编辑器上传图片添加水印功能
2015/04/16 PHP
php自定义分页类完整实例
2015/12/25 PHP
PHP面向对象程序设计之多态性的应用示例
2018/12/19 PHP
php二维数组按某个键值排序的实例讲解
2019/02/15 PHP
jquery中的ajax方法怎样通过JSONP进行远程调用
2014/05/04 Javascript
JavaScript获取table中某一列的值的方法
2014/05/06 Javascript
浅析四种常见的Javascript声明循环变量的书写方式
2015/10/14 Javascript
js实现滚动条滚动到页面底部继续加载
2015/12/19 Javascript
JS冒泡事件与事件捕获实例详解
2016/11/25 Javascript
浅谈jQuery before和insertBefore的区别
2016/12/04 Javascript
bootstrap滚动监控器使用方法解析
2017/01/13 Javascript
js实现彩色条纹滚动条效果
2017/03/15 Javascript
node.js基于express使用websocket的方法
2017/11/09 Javascript
vue.js实现的绑定class操作示例
2018/07/06 Javascript
JS数组去重的6种方法完整实例
2018/12/08 Javascript
[05:39]2014DOTA2国际邀请赛 DK晋级胜者组专访战队国士无双
2014/07/14 DOTA
Python实现的选择排序算法示例
2017/11/29 Python
对python Tkinter Text的用法详解
2018/10/11 Python
PyQt5通信机制 信号与槽详解
2019/08/07 Python
用python的turtle模块实现给女票画个小心心
2019/11/23 Python
Python下利用BeautifulSoup解析HTML的实现
2020/01/17 Python
在echarts中图例legend和坐标系grid实现左右布局实例
2020/05/16 Python
Pycharm配置lua编译环境过程图解
2020/11/28 Python
一波HTML5 Canvas基础绘图实例代码集合
2016/02/28 HTML / CSS
size?丹麦官网:英国伦敦的球鞋精品店
2019/04/15 全球购物
蛋糕店创业计划书范文
2014/09/21 职场文书
群众路线查摆问题整改措施思想汇报
2014/10/10 职场文书
2015年“7.11”世界人口日宣传活动方案
2015/05/06 职场文书
MySQL的全局锁和表级锁的具体使用
2021/08/23 MySQL
零基础学java之带返回值的方法的定义和调用
2022/04/10 Java/Android