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

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

工作进程

官网文档代码

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

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

maxDistance、areaWidth

javascript 复制代码
<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 ,这个是非常重要的。

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

javascript 复制代码
{
                        showList.length>0?
                        showList.map((item) => {
                            return(
                                <View className='mainBoxItem' key={item.time}>
                                    <AtSwipeAction
                                        autoClose
                                        maxDistance={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>
                    }

接下来的属性的介绍

isOpened

是否开启 Boolean 默认值:true

disabled

是否禁止滑动 Boolean 默认值:false

autoClose

点击选项时,是否自动关闭 Boolean 默认值:false

options

展示的选项数组 [{ text , style? , className? }] []

onClick

点击触发事件

onOpened

完全打开时触发

onClosed

完全关闭时触发

相关推荐
namehu2 天前
Taro 小程序 Video 组件 referrer-policy="origin" 属性失效排查记
前端·taro
vvilkim13 天前
Taro 状态管理全面指南:从本地状态到全局方案
taro
vvilkim15 天前
Taro:跨端开发的终极解决方案
taro
雨中的风铃子17 天前
taro小程序如何实现新用户引导功能?
小程序·taro
云边小卖铺.18 天前
React+Taro创建小程序
react.js·小程序·taro
沈春庭20 天前
【MoodVine】Taro+React对于大文件的轮询请求实现
前端·javascript·react.js·微信小程序·taro·promise
楽码24 天前
AI提问:进行深度交互
aigc·openai·taro
不爱吃糖的程序媛1 个月前
鸿蒙版Taro 搭建开发环境
华为·harmonyos·taro
PyAIGCMaster1 个月前
react+taro 开发第五个小程序,解决拼音的学习
react.js·小程序·taro
程序员小刘1 个月前
【HarmonyOS 5】鸿蒙Taro跨端框架
华为·harmonyos·taro