Taro-AtSwipeAction使用（坑）

最新推荐文章于 2024-05-30 09:42:46 发布

逍康

最新推荐文章于 2024-05-30 09:42:46 发布

阅读量811

点赞数 1

分类专栏： Taro 文章标签：前端

本文链接：https://blog.csdn.net/lsk222/article/details/125519967

版权

Taro 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

小程序要做一个左滑显示删除Button

如下图：

找到 taro-ui组件 <atSwipeAction>

把代码Copy过来发现根本没啥效果

<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

Taro 官方文档有点过分了......