uni-app IOS APP uni.showActionSheet()方法弹窗上面有留白

uni-app IOS APP uni.showActionSheet()方法弹窗上面有留白

示例代码：

uni.showActionSheet({  
    itemList:['拍摄', '从相册选择']  
    success: function (res) {  
        console.log('选中了第' + (res.tapIndex + 1) + '个按钮');  
    },  
    fail: function (res) {  
        console.log(res.errMsg);  
    }  
});

操作步骤：

uni.showActionSheet({  
    itemList:['拍摄', '从相册选择']  
    success: function (res) {  
        console.log('选中了第' + (res.tapIndex + 1) + '个按钮');  
    },  
    fail: function (res) {  
        console.log(res.errMsg);  
    }  
});

预期结果：

  • IOS APP uni.showActionSheet()方法弹窗上面没有留白

实际结果：

  • IOS APP uni.showActionSheet()方法弹窗上面有留白

bug描述：

  • IOS APP uni.showActionSheet()方法弹窗上面有留白，Android上面是正常的

附件

Image 1

Image 2


更多关于uni-app IOS APP uni.showActionSheet()方法弹窗上面有留白的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app IOS APP uni.showActionSheet()方法弹窗上面有留白的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 中，使用 uni.showActionSheet() 方法在 iOS 设备上弹窗时出现留白的情况，可能是由于以下原因导致的：

1. iOS 系统样式问题

iOS 系统的 ActionSheet 样式在默认情况下可能会有一定的留白或间距，这是系统默认的样式行为。如果你觉得留白过大，可以尝试调整样式或使用自定义弹窗。

2. uni-app 版本问题

确保你使用的是最新版本的 uni-app。旧版本可能存在一些兼容性问题，更新到最新版本可能会解决这个问题。

3. 自定义样式

如果你对默认样式不满意，可以使用自定义弹窗来替代 uni.showActionSheet()。uni-app 支持使用 uni-popup 组件来实现自定义弹窗，这样可以更灵活地控制弹窗的样式和布局。

<template>
  <view>
    <button @click="showCustomActionSheet">显示自定义弹窗</button>
    <uni-popup ref="popup" type="bottom">
      <view class="custom-action-sheet">
        <view class="action-item" @click="handleAction(1)">选项1</view>
        <view class="action-item" @click="handleAction(2)">选项2</view>
        <view class="action-item" @click="handleAction(3)">选项3</view>
        <view class="action-item cancel" @click="closePopup">取消</view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  methods: {
    showCustomActionSheet() {
      this.$refs.popup.open();
    },
    handleAction(index) {
      console.log('选择了选项', index);
      this.closePopup();
    },
    closePopup() {
      this.$refs.popup.close();
    }
  }
};
</script>

<style>
.custom-action-sheet {
  background-color: #fff;
  border-radius: 10px 10px 0 0;
  padding: 10px;
}
.action-item {
  padding: 15px;
  text-align: center;
  border-bottom: 1px solid #eee;
}
.action-item.cancel {
  color: #ff0000;
  border-bottom: none;
}
</style>
回到顶部