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 前台切换网站的样式实现
Jun 22 Javascript
js禁止回车提交表单的示例代码
Dec 23 Javascript
jquery预览图片实现鼠标放上去显示实际大小
Jan 16 Javascript
JavaScript按值删除数组元素的方法
Apr 24 Javascript
JavaScript中三种异步上传文件方式
Mar 06 Javascript
JQuery 传送中文乱码问题的简单解决办法
May 24 Javascript
小发现之浅谈location.search与location.hash的问题
Jun 23 Javascript
使用Node.js搭建静态资源服务详细教程
Aug 02 Javascript
AngularJS使用ng-repeat遍历二维数组元素的方法详解
Nov 11 Javascript
javaScript实现游戏倒计时功能
Nov 17 Javascript
IE11下处理Promise及Vue的单项数据流问题
Jul 24 Javascript
js实现点击按钮随机生成背景颜色
Sep 05 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
高分R级DC动画剧《哈莉·奎茵》第二季正式预告首发
2020/04/09 欧美动漫
CI框架中cookie的操作方法分析
2014/12/12 PHP
PHP和C#可共用的可逆加密算法详解
2015/10/26 PHP
PHP二维数组矩形转置实例
2016/07/20 PHP
在Laravel5.6中使用Swoole的协程数据库查询
2018/06/15 PHP
js css样式操作代码(批量操作)
2009/10/09 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件
2011/12/21 Javascript
NodeJs中的非阻塞方法介绍
2012/06/05 NodeJs
js带按钮的提示框可供选择示例代码
2013/09/17 Javascript
js中iframe调用父页面的方法
2014/10/30 Javascript
JS实现的仿东京商城菜单、仿Win右键菜单及仿淘宝TAB特效合集
2015/09/28 Javascript
Angularjs实现上传图片预览功能
2017/09/01 Javascript
vue项目国际化vue-i18n的安装使用教程
2018/03/14 Javascript
vue.js自定义组件directives的实例代码
2018/11/09 Javascript
迅速了解一下ES10中Object.fromEntries的用法使用
2019/03/05 Javascript
vue页面引入three.js实现3d动画场景操作
2020/08/10 Javascript
使用Typescript开发微信小程序的步骤详解
2021/01/12 Javascript
Python random模块常用方法
2014/11/03 Python
在Python中使用PIL模块处理图像的教程
2015/04/29 Python
让Python更加充分的使用Sqlite3
2017/12/11 Python
python opencv 直方图反向投影的方法
2018/02/24 Python
python实现人民币大写转换
2018/06/20 Python
python 制作python包,封装成可用模块教程
2020/07/13 Python
python判断all函数输出结果是否为true的方法
2020/12/03 Python
html5使用canvas压缩图片的示例代码
2018/09/11 HTML / CSS
SmartBuyGlasses荷兰:购买太阳镜和眼镜
2020/03/16 全球购物
房地产项目策划书
2014/02/05 职场文书
《桂林山水》教学反思
2014/02/08 职场文书
启动仪式策划方案
2014/06/14 职场文书
安全生产月宣传标语
2014/10/06 职场文书
2015年社区综治宣传月活动总结
2015/03/25 职场文书
简单的辞职信模板
2015/05/12 职场文书
2015年创先争优工作总结
2015/05/23 职场文书
时尚女魔头观后感
2015/06/04 职场文书
基于Redis的List实现特价商品列表功能
2021/08/30 Redis
Python PIL按比例裁剪图片
2022/05/11 Python