气泡卡片组件位置异常,无法正常控制显示的位置

小程序开发相关产品技术讨论,包括面板、智能小程序、React Native、Ray跨端框架、Panel SDK、微信小程序、小程序开发工具(IDE)及其他开发技术相关等话题


Post Reply
silverlight
Posts: 114

  • Tuya MiniApp IDE 版本信息:Node: v18.20.1 Tools: 0.7.1 Ray: 1.5.20

Code: Select all

"@ray-js/components-ty-popover": "^0.1.0",
"@ray-js/panel-sdk": "^1.10.0",
"@ray-js/ray": "^1.5.29",

- 相关代码:

Code: Select all

    <View className={styles.box} >
            <Popover
          visible={visibleIcon}
          content={contentIcon}
          placement="bottom-right"
          overlay
          onClickOverlay={handleMaskTab}
          popoverClassName={styles.demoBtn}
        >
          {/* <View className={styles.demoBtn} onClick={handleClickIcon}>
            展示图标
          </View> */}
        </Popover>
        </View>

其中样式为

Code: Select all

.box {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%; /* 调整为100% */
  height: 100%;
  background: linear-gradient(to bottom, #e5e5e7, #fffeff); /* 使用线性渐变 */
  align-items: center; /* 垂直居中 */
  background-repeat: repeat;
}
.demoBtn {
  position: absolute;
  top: 100rpx;
  right: 100rpx;
  z-index: 999; /* 确保在最上层 */
  background-color: #fff;
}

Code: Select all

- 预期结果:我希望气泡在页面右上角显示。

- 实际结果:气泡在top:0,right:0这个样式的时候,气泡生成在页面正中间,而right为负的时候,才是往右移动。且往右移动一定程度,该组件气泡箭头和文本分离
气泡组件.png
气泡组件错位.png
Last edited by silverlight on 2024年 Oct 30日 15:15, edited 1 time in total.

Tags:
xuanyi
Posts: 79
Location: 涂鸦玄一

Re: 气泡卡片组件位置异常,无法正常控制显示的位置

样式 box 里的 align-items 去掉试下呢

silverlight
Posts: 114

Re: 气泡卡片组件位置异常,无法正常控制显示的位置

xuanyi 2024年 Oct 28日 16:15

样式 box 里的 align-items 去掉试下呢

去掉之后,位置是这样的

气泡组件错位2.png
xuanyi
Posts: 79
Location: 涂鸦玄一

Re: 气泡卡片组件位置异常,无法正常控制显示的位置

position: absolute;
top: 100rpx;
right: 100rpx;
把这几行去掉试下

silverlight
Posts: 114

Re: 气泡卡片组件位置异常,无法正常控制显示的位置

xuanyi 2024年 Oct 29日 11:19

position: absolute;
top: 100rpx;
right: 100rpx;
把这几行去掉试下

Code: Select all

.demoBtn {
  z-index: 999; /* 确保在最上层 */
  background-color: #fff;
}

此时位置如下

气泡组件位置2.png

其中的几个组件的位置属性如下
view组件

气泡组件view位置.png

三角位置

气泡组件三角位置.png

文本框

气泡组件文本框.png
Ron
Posts: 2

Re: 气泡卡片组件位置异常,无法正常控制显示的位置

Popover是根据父级节点做定位,因此最好是将 .box 这层做文本靠右处理
方法有很多

  1. 如你的例子中用绝对定位
    企业微信20241030-145521@2x.png
  2. 文本靠右
    22@2x.png
    ...
silverlight
Posts: 114

Re: 气泡卡片组件位置异常,无法正常控制显示的位置

Ron 2024年 Oct 30日 14:57

Popover是根据父级节点做定位,因此最好是将 .box 这层做文本靠右处理
方法有很多

  1. 如你的例子中用绝对定位
    企业微信20241030-145521@2x.png
  2. 文本靠右
    22@2x.png
    ...

好的,谢谢讲解

Ron
Posts: 2

Re: 气泡卡片组件位置异常,无法正常控制显示的位置

silverlight 2024年 Oct 30日 15:14
Ron 2024年 Oct 30日 14:57

Popover是根据父级节点做定位,因此最好是将 .box 这层做文本靠右处理
方法有很多

  1. 如你的例子中用绝对定位
    企业微信20241030-145521@2x.png
  2. 文本靠右
    22@2x.png
    ...

好的,谢谢讲解

客气 :)

Post Reply