taro-ui icon indicating copy to clipboard operation
taro-ui copied to clipboard

Published 20 hours ago • verified publisher icon NervJS

AtSwipeAction 及其各层子元素宽度变成 0

Open Tom9402 opened this issue 4 years ago • 16 comments

问题描述

AtSwipeAction 及其各层子元素宽度变成 0，需要在微信开发者工具将每一层子元素的宽度设置成100%才可见。 图片 图片

复现步骤

打开用到 AtSwipeAction 组件的地方都是这样的。

import React from 'react'
import { View, Text } from '@tarojs/components'
import { AtList, AtListItem, AtSwipeAction } from 'taro-ui'
import './customer.scss'
import { transferUndefined } from '../../utils'

export default function Customer(props) {
  const { listData, onListClick, onCall, onDelete } = props
  let listHtml = (listData && listData.length) && listData.map((item) => {
    transferUndefined(item)
    const { can_delete, can_transfer, id, title, note, thumb, phone } = item
    const permissions = { can_delete: can_delete, can_transfer: can_transfer }
    return (
      <AtSwipeAction
        autoClose
        key={id}
        options={[
          {
            text: '删除',
            style: {
              backgroundColor: '#FF4949'
            }
          },
          {
            text: '移交'
          }
        ]}
        onClick={onDelete.bind(this, id, 'customer', permissions)}
      >
        <AtListItem
          title={title}
          note={note}
          arrow='right'
          thumb={thumb}
          onClick={onListClick.bind(this, id)}
        />
        <View
          style='position: relative;top: -60rpx;left: 25rpx;'
          onClick={onCall.bind(this, phone, 'phone')}
        >
          电话<Text>{' ' + phone}</Text>
        </View>
      </AtSwipeAction>
    )
  })

  return <View className='customer-root'>
    <AtList>
      {listHtml}
    </AtList>
  </View>
}

期望行为

期望 AtSwipeAction 宽度样式恢复正常

报错信息

⚠️ 编译警告.

chunk common [mini-css-extract-plugin] Conflicting order between:

chunk common [mini-css-extract-plugin] Conflicting order between:

chunk common [mini-css-extract-plugin] Conflicting order between:

系统信息

Taro v3.0.22

Taro CLI 3.0.22 environment info: System: OS: Windows 10 Binaries: Node: 14.2.0 - C:\Program Files\nodejs\node.EXE npm: 6.14.4 - C:\Program Files\nodejs\npm.CMD

Tom9402 avatar Jan 08 '21 08:01 Tom9402

问题已解决，原因是缺少下图两个属性。 图片

Tom9402 avatar Jan 09 '21 12:01 Tom9402

图

图片看不到，可以贴出来吗

Loomark avatar Jan 11 '21 05:01 Loomark

@Tom9402 @Loomark 兄弟加了也没用，索性自己实现了一个。哎，真怀疑这是个KPI 项目，都好几个月不更新了,各种bug太折磨人了，跟 mpvue 坑货一个样。

shikiiGithub avatar Jan 11 '21 05:01 shikiiGithub

@Loomark 问题解决了吗？ <AtSwipeAction autoClose maxDistance={75} disabled areaWidth={systemInfo.screenWidth} onClick={(value) => handleCustomerApply(value, n)} key={n.id} options={[ { text: '移除', style: { backgroundColor: '#D63535' } }, ]} > .at-swipe-action__option { width: 65px; } 我这样是显示正常的 但是 disabled 属性是无效的 这个是我遇到的问题

evanyangg avatar Jan 13 '21 08:01 evanyangg

在这个issue之前我就在commit页面留言反应过这个问题了，但感觉并没啥用。。老版本还好好的，重新实现之后就崩了

BkunS avatar Jan 13 '21 10:01 BkunS

图

图片看不到，可以贴出来吗

我回公司打开原项目后又可以了，什么都没改，可能官方修复了吧？……

Tom9402 avatar Jan 14 '21 06:01 Tom9402

图

图片看不到，可以贴出来吗

我回公司打开原项目后又可以了，什么都没改，可能官方修复了吧？……

看了代码，完全没有动，还是不好用。。你是怎么写的？

BkunS avatar Jan 23 '21 08:01 BkunS

taro-ui 3.0.0-alpha.3版本是不需要这两个属性的，可以退回版本解决

onlyU-uaena avatar Feb 01 '21 16:02 onlyU-uaena

taro-ui 3.0.0-alpha.3版本是不需要这两个属性的，可以退回版本解决

总不能一直靠退回老版本解决啊，而且现在taro-cli选taro-ui模板搭出来的项目默认用的就是这个会出这个问题的SwipeAction组件。

BkunS avatar Feb 03 '21 02:02 BkunS

taro-ui 3.0.0-alpha.3版本是不需要这两个属性的，可以退回版本解决

总不能一直靠退回老版本解决啊，而且现在taro-cli选taro-ui模板搭出来的项目默认用的就是这个会出这个问题的SwipeAction组件。

毕竟还不是正式版 文档上确实没有写 我当时用的ts检测报错了才发现多了两个required属性 然后我就干脆退回了

onlyU-uaena avatar Feb 03 '21 05:02 onlyU-uaena

很怀疑taro-ui是不是实习生做的

iNiL0119 avatar Feb 24 '21 09:02 iNiL0119

遇到同样的问题，直接回退版本了

TralafalgarV avatar Apr 25 '21 07:04 TralafalgarV

如果你是"taro-ui": "3.0.0-alpha.10"，就会出现题主说的这种情况， 这个时候如果你的项目中使用了TS，就会很容易发现，提示缺少 areaWidth 和 maxDistance 这两个属性， image 将这两个属性加上就可以显示出来了，

但是需要注意的是：areaWidth 的值要求设置 number 类型的值，但是最好别设置个固定的数值！ 比如说，你的项目是配置的以 750px 作为换算尺寸标准，然后你想设置宽度为整个屏幕宽度，你不能直接将areaWidth设置成375，感觉它这里设置的宽度值并没有去根据项目的换算尺寸标准去换算，直接写死一个数值，当在一些大屏手机上看，就会发现并没有铺满整个屏幕的宽度，无论屏幕宽度是多大，它这个的宽度已经定死就那么宽。

解决： 这里可以使用Taro.getSystemInfoSync().screenWidth去动态获取屏幕的宽度来赋值 areaWidth={Taro.getSystemInfoSync().screenWidth}

我是这么解决的，希望对遇到同样问题的人有帮助

另外： 上面说的，将版本回退到如"taro-ui": "3.0.0-alpha.3"，这样做确实能显示出来，解决题主的样式问题，也不用去设置那两个属性，但是会有新的问题 ==> 在 Android 手机上，你会发现，滑动十分不灵敏，总是滑不出来的感觉（可能是我手机的问题吧...）

kivet-h avatar Jul 08 '21 03:07 kivet-h

真tm坑。taro2升级3的时候就一堆坑，我日了狗。。好容易升上来，让ui项目又给坑了，擦

BongBongBang avatar Mar 12 '22 14:03 BongBongBang

直接替换成vant组件库吧，taro-ui从2.x开始就已经停止维护了，貌似维护这个项目的人不是京东内部的人

dreamthen avatar May 02 '22 17:05 dreamthen

如果你是"taro-ui": "3.0.0-alpha.10"，就会出现题主说的这种情况， 这个时候如果你的项目中使用了TS，就会很容易发现，提示缺少 areaWidth 和 maxDistance 这两个属性， image 将这两个属性加上就可以显示出来了，

但是需要注意的是：areaWidth 的值要求设置 number 类型的值，但是最好别设置个固定的数值！ 比如说，你的项目是配置的以 750px 作为换算尺寸标准，然后你想设置宽度为整个屏幕宽度，你不能直接将areaWidth设置成375，感觉它这里设置的宽度值并没有去根据项目的换算尺寸标准去换算，直接写死一个数值，当在一些大屏手机上看，就会发现并没有铺满整个屏幕的宽度，无论屏幕宽度是多大，它这个的宽度已经定死就那么宽。

解决： 这里可以使用Taro.getSystemInfoSync().screenWidth去动态获取屏幕的宽度来赋值 areaWidth={Taro.getSystemInfoSync().screenWidth}

我是这么解决的，希望对遇到同样问题的人有帮助

另外： 上面说的，将版本回退到如"taro-ui": "3.0.0-alpha.3"，这样做确实能显示出来，解决题主的样式问题，也不用去设置那两个属性，但是会有新的问题 ==> 在 Android 手机上，你会发现，滑动十分不灵敏，总是滑不出来的感觉（可能是我手机的问题吧...）

maxDistance与options中的style样式的宽度动态结合,就是这么复杂......

dreamthen avatar May 02 '22 17:05 dreamthen