taro框架之taro-ui中AtSwipeAction的使用

news/2024/5/10 20:39:06/文章来源:https://blog.csdn.net/2201_75705263/article/details/136940653

题记：所需效果：滑动删除

工作进程

官网文档代码

<AtSwipeAction options={[{text: '取消',style: {backgroundColor: '#6190E8'}},{text: '确认',style: {backgroundColor: '#FF4949'}}
]}><View className='normal'>AtSwipeAction 一般使用场景</View>
</AtSwipeAction>

发现写了没有效果，需要增加两个属性

maxDistance、areaWidth

<AtSwipeAction maxDistance={80}  areaWidth={Taro.getSystemInfoSync().windowWidth*0.88} // 适配不同手机系统屏幕宽度options={[{text: '取消',style: {backgroundColor: '#6190E8'}},{text: '确认',style: {backgroundColor: '#FF4949'}}
]}><View className='normal'>AtSwipeAction 一般使用场景</View>
</AtSwipeAction>

还要注意<AtSwipeAction> 父组件的定位不要为 absolute ，这个是非常重要的。

下边是工作的一个案例代码

{showList.length>0?showList.map((item) => {return(<View className='mainBoxItem' key={item.time}><AtSwipeActionautoClosemaxDistance={80}  areaWidth={Taro.getSystemInfoSync().windowWidth*0.88}options={[{text: '删除',style: {backgroundColor: '#FF4949'}}]}onClick={this.deleteClick.bind(this,item)}><View className='normal' onClick={this.subscribeDetail.bind(this,item)}><View className='boxItem'>{item.resourceImgs === null ?<View className='imageBox1'>暂无图片</View>:<Image className='imageBox' src={item.resourceImgs} />}<View className='content'><View className='contentTop'>{item.resourceTypes}</View><View className='contentBottom'>预约日期:{item.appointTime}</View></View><View className='contentFix' style={{background:item.changeColor}}>{item.statusContent}</View></View></View></AtSwipeAction></View>)}): <View className='none'><View  className='img' ><Image src={none} className='pic'></Image></View><View className='noText'>暂无数据</View></View>}

接下来的属性的介绍