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 获取表单text,areatext,radio,checkbox,select值的代码
Nov 12 Javascript
javascript getElementsByTagName
Jan 31 Javascript
jQuery中on绑定事件后引发的事件冒泡问题如何解决
May 25 Javascript
js实现可键盘控制的简单抽奖程序
Jul 13 Javascript
详解Vue2.0里过滤器容易踩到的坑
Jun 01 Javascript
AngularJS实现tab选项卡的方法详解
Jul 05 Javascript
二维码图片生成器QRCode.js简单介绍
Aug 18 Javascript
zTree获取当前节点的下一级子节点数实例
Sep 05 Javascript
Javascript实现异步编程的过程
Jun 18 Javascript
vue 使用html2canvas将DOM转化为图片的方法
Sep 11 Javascript
React SSR样式及SEO的实践
Oct 22 Javascript
vue全局使用axios的操作
Sep 08 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程序内部post数据的方法
2015/03/31 PHP
php curl请求信息和返回信息设置代码实例
2015/04/27 PHP
利用PHP自动生成印有用户信息的名片
2016/08/01 PHP
thinkPHP商城公告功能开发问题分析
2016/12/01 PHP
PHP操作redis实现的分页列表,新增,删除功能封装类与用法示例
2018/08/04 PHP
HTML复选框和单选框 checkbox和radio事件介绍
2012/12/12 Javascript
js调用iframe实现打印页面内容的方法
2014/03/04 Javascript
一个简单的jquery的多选下拉框(自写)
2014/05/05 Javascript
javascript实现验证身份证号的有效性并提示
2015/04/30 Javascript
jquery实现页面虚拟键盘特效
2015/08/08 Javascript
java必学必会之static关键字
2015/12/03 Javascript
JavaScript模块化开发之SeaJS
2015/12/13 Javascript
js实现瀑布流的三种方式比较
2020/06/28 Javascript
使用jquery判断一个元素是否含有一个指定的类(class)实例
2017/02/12 Javascript
微信小程序开发中的疑问解答汇总
2017/07/03 Javascript
vue axios数据请求get、post方法及实例详解
2018/09/11 Javascript
jQuery AJAX应用实例总结
2020/05/19 jQuery
详解vue高级特性
2020/06/09 Javascript
微信小程序实现多张图片上传功能
2020/11/18 Javascript
[36:37]2014 DOTA2华西杯精英邀请赛5 24 VG VS iG
2014/05/25 DOTA
[03:42]2014DOTA2国际邀请赛 第三日比赛排位扑朔迷离
2014/07/12 DOTA
python字符串连接方式汇总
2014/08/21 Python
详解Python中的循环语句的用法
2015/04/09 Python
使用Python+Splinter自动刷新抢12306火车票
2018/01/03 Python
Django打印出在数据库中执行的语句问题
2019/07/25 Python
在Django下测试与调试REST API的方法详解
2019/08/29 Python
Python xml、字典、json、类四种数据类型如何实现互相转换
2020/05/27 Python
Windows下pycharm安装第三方库失败(通用解决方案)
2020/09/17 Python
Pycharm中如何关掉python console
2020/10/27 Python
详解canvas绘图时遇到的跨域问题
2018/03/22 HTML / CSS
Orlebar Brown官网:设计师泳裤和泳装
2020/12/08 全球购物
社会学专业求职信
2014/02/24 职场文书
2014年社区教育工作总结
2014/12/02 职场文书
教师个人年度总结
2015/02/11 职场文书
Java实现多文件上传功能
2021/06/30 Java/Android
python实现简易自习室座位预约系统
2021/06/30 Python