uni-app中uni.showActionSheet的参数popover.width设置弹出窗口宽度无效

uni-app中uni.showActionSheet的参数popover.width设置弹出窗口宽度无效

项目 信息
产品分类 uniapp/H5
PC开发环境操作系统 Mac
PC开发环境操作系统版本号 13
HBuilderX类型 正式
HBuilderX版本号 4.12
浏览器平台 Edge
浏览器版本 123.0.2420.97
项目创建方式 HBuilderX

操作步骤：

uni.showActionSheet({  
    itemList: ['修改密码', '退出'],  
    popover: {  
        width: 100,  
        top: getApp().globalData.windowInfo.windowTop,  
        left: getApp().globalData.windowInfo.windowWidth - 160  
    },  
    success: (e) => {  
        console.log(e.tapIndex);  
        uni.showToast({  
            title: "点击了第" + e.tapIndex + "个选项",  
            icon: "none"  
        })  
    }  
})

预期结果：

  • 宽度100

实际结果：

  • 宽度300

bug描述：

uni.showActionSheet的参数popover.width设置弹出窗口宽度无效 不管怎么设置，窗口宽度始终是300px

image


更多关于uni-app中uni.showActionSheet的参数popover.width设置弹出窗口宽度无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

感谢反馈，问题已确认，我看看如何解决，已加分

更多关于uni-app中uni.showActionSheet的参数popover.width设置弹出窗口宽度无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这个问题有修复计划了吗？现在一直很宽，看着很别扭。

在 uni-app 中，uni.showActionSheet 是一个用于显示操作菜单的 API。根据官方文档，uni.showActionSheet 的参数中并没有 popover.width 这个选项，因此设置 popover.width 是无效的。

uni.showActionSheet 的常用参数包括：

  • itemList: 必填，按钮的文字数组，数组长度最大为 6。
  • itemColor: 可选，按钮的文字颜色，默认为 #000000。
  • success: 可选，接口调用成功的回调函数。
  • fail: 可选，接口调用失败的回调函数。
  • complete: 可选，接口调用结束的回调函数（调用成功、失败都会执行）。

如果你需要自定义弹出窗口的宽度或其他样式，uni.showActionSheet 本身并不支持这些高级定制。你可以考虑使用其他组件或自定义弹窗来实现更复杂的样式需求。

例如，你可以使用 uni-popup 组件来实现自定义的弹窗样式，或者使用 uni-modal 组件来创建一个模态对话框，并通过 CSS 来控制其宽度和其他样式。

以下是一个使用 uni-popup 组件的简单示例：

<template>
  <view>
    <button @click="showPopup">显示自定义弹窗</button>
    <uni-popup ref="popup" type="bottom">
      <view class="custom-popup">
        <view class="popup-item" @click="handleClick('选项1')">选项1</view>
        <view class="popup-item" @click="handleClick('选项2')">选项2</view>
        <view class="popup-item" @click="handleClick('选项3')">选项3</view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  methods: {
    showPopup() {
      this.$refs.popup.open();
    },
    handleClick(item) {
      console.log('点击了:', item);
      this.$refs.popup.close();
    }
  }
};
</script>

<style>
.custom-popup {
  width: 300px; /* 自定义宽度 */
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
}

.popup-item {
  padding: 15px;
  border-bottom: 1px solid #eee;
}

.popup-item:last-child {
  border-bottom: none;
}
</style>
回到顶部