Taro UI AtSwipeAction不生效解决方法

问题描述

taroui版本如下:

"taro-ui": "^3.0.0-alpha.3"

使用SwipeAction没有生效

解决方法

官方文档书没写全,需要另外添加两个属性
1.maxDistance 滑块最大滑动距离
2.areaWidth 组件宽度 (如果不引用会导致组件占位宽度为0,不会显示)

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

修改后 界面效果如下:
在这里插入图片描述
在这里插入图片描述

参考文档

Taro SwipeAction 滑动操作

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要使用Taro UI的轮播图组件,你需要按照以下步骤进行操作: 1. 在你的Taro项目中,确保已经安装了Taro UI库。如果没有安装,可以使用以下命令进行安装: ``` npm install taro-ui ``` 2. 在你的样式文件中,引入轮播图组件的样式。根据你提供的引用内容,你可以在样式文件中引入`icon.scss`、`avatar.scss`和`button.scss`这些文件,但这些文件与轮播图组件无关。 3. 在你的页面文件中,引入Taro UI的轮播图组件。你需要在页面文件的`.jsx`或`.tsx`文件中引入轮播图组件的代码,并使用该组件进行渲染。 ``` import { Swiper, SwiperItem } from 'taro-ui' ``` 4. 在你的页面文件中,编写轮播图组件的代码。你可以使用`Swiper`组件和`SwiperItem`组件来创建轮播图。例如: ``` <Swiper className='swiper-container' indicatorColor='#999' indicatorActiveColor='#333' circular indicatorDots autoplay > <SwiperItem> <Image className='swiper-image' src='https://example.com/image1.jpg' /> </SwiperItem> <SwiperItem> <Image className='swiper-image' src='https://example.com/image2.jpg' /> </SwiperItem> ... </Swiper> ``` 这里的`Image`组件可以用来显示轮播图中的图片,你可以根据实际需求替换图片的URL。 5. 在你的页面文件中,根据需要为轮播图组件添加样式。你可以在样式文件中定义`.swiper-container`和`.swiper-image`类名,并在轮播图组件中使用这些类名来设置样式。 ``` .swiper-container { width: 100%; height: 200px; } .swiper-image { width: 100%; height: 100%; } ``` 这样,你就可以在Taro项目中使用Taro UI的轮播图组件了。请注意,以上代码只是示例,你可以根据自己的需要进行修改和调整。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值