uniapp接口-uni.showActionSheet 从底部向上弹出操作菜单

痛定思痛。 2021-07-25 22:01 1559阅读 0赞

官方示例：[https://uniapp.dcloud.io/api/ui/prompt?id=showactionsheet][https_uniapp.dcloud.io_api_ui_prompt_id_showactionsheet]

## 效果图： ##

![20210305122400850.gif][]

注意：该示例在手机上运行时可能会出现标题不显示的bug

## 代码实现： ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70][]

<template>
    	<view><button @tap="actionSheetTap">弹出action sheet</button></view>
    </template>
    <script>
    export default {
    	data() {
    		return {
    			buttonRect: {}
    		};
    	},
    	methods: {
    		actionSheetTap() {
    			const that = this;
    			uni.showActionSheet({
    				title: '标题',
    				itemList: ['item1', 'item2', 'item3', 'item4'],
    				popover: {
    					top: that.buttonRect.top * 2 + that.buttonRect.height,
    					left: that.buttonRect.left + that.buttonRect.width / 2
    				},
    				success: e => {
    					uni.showToast({
    						title: '点击了第' + e.tapIndex + '个选项',
    						icon: 'none'
    					});
    				}
    			});
    		}
    	}
    };
    </script>

[https_uniapp.dcloud.io_api_ui_prompt_id_showactionsheet]: https://uniapp.dcloud.io/api/ui/prompt?id=showactionsheet
[20210305122400850.gif]: /images/20210725/0da76e95f73544cebcde04b76de28d90.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70]: /images/20210725/eead9775bd2547e88cb9bc9f045f6c7b.png

发表评论取消回复

表情：

评论列表（有 0 条评论，1559人围观）

还没有评论，来说两句吧...

相关阅读

相关 Android 底部弹出Dialog

多App都需要点击某一个Button就会从底部弹出一个Dialog，就像微信的分享等话不多说，直接上代码了自定义一个方法 bottomDialog =...

电玩女神/ 2024年04月19日 08:31/ 0 赞/ 40 阅读

相关 uni-app 从底部向上弹出菜单

我在项目需求中需要实现从底部向上弹窗菜单效果功能在uni-app给出原生组件showActionSheet发现设置标题，在uni-app项目中正常显示，但是在微信小程序

港控/mmm°/ 2022年11月13日 15:23/ 0 赞/ 470 阅读

相关 uniapp点击按钮从底部弹出操作菜单

uni.showActionSheetuni > 从底部向上弹出操作菜单 uni.showActionSheet({ itemList: ['A

雨点打透心脏的1/2处/ 2022年10月30日 08:25/ 0 赞/ 712 阅读

相关 activity从底部弹出动画

要实现activity从底部弹出的动画，一般参考这篇博文就能实现： [http://blog.csdn.net/spy19881201/article/details/586

布满荆棘的人生/ 2022年09月24日 14:21/ 0 赞/ 221 阅读

相关 PopupWindow从底部弹出

> [原文链接（建议跳转）：Android Animation实战之屏幕底部弹出PopupWindow][Android Animation_PopupWindow] 我们仿

快来打我*/ 2022年06月13日 08:39/ 0 赞/ 304 阅读

相关底部弹出

项目中做了一个底部弹出，记录在此。 ![70][] ![70 1][] css： html, body \{ width: 100%; heig

傷城~/ 2022年05月21日 01:06/ 0 赞/ 231 阅读

相关从底部弹出Dialog窗口

效果图 ![这里写图片描述][70] 总体结构 ![这里写图片描述][70 1] dialog\_enter.xml //dialog的进入动画 <?xml

超、凢脫俗/ 2022年05月14日 01:51/ 0 赞/ 236 阅读

相关 Android从屏幕底部弹出PopupWin窗口

1、布局文件 lay\_menupopwin <?xml version="1.0" encoding="utf-8"?> <LinearLayout xm

Love The Way You Lie/ 2022年01月31日 05:57/ 0 赞/ 579 阅读

相关底部弹出框动画

qq微信小程序学习交流群：581478349 ![20190319101910350.png][]

傷城~/ 2021年09月18日 13:14/ 0 赞/ 433 阅读

相关 uniapp接口-uni.showActionSheet 从底部向上弹出操作菜单

官方示例：[https://uniapp.dcloud.io/api/ui/prompt?id=showactionsheet][https_uniapp.dcloud.io_

痛定思痛。/ 2021年07月25日 22:01/ 0 赞/ 1560 阅读