action-sheet和showActionSheet的区别

最新推荐文章于 2024-08-09 07:11:02 发布
最新推荐文章于 2024-08-09 07:11:02 发布
阅读量4.9k 收藏
点赞数 1
分类专栏： 前端 文章标签： action-sheet showActionSheet 小程序 action-sheet和showAct 上拉菜单
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shaleilei/article/details/78359309
版权

action-sheet和showActionSheet的区别:

其实也很容易理解,action-sheet是HTML中的布局,但是wx.showActionSheet是js中的调用方法,一个道理


微信小程序提供了两种下拉菜单方法,分别是action-sheet和picker:

其中,action-sheet提供了两种方法实现下拉,第一种是action-sheet标签和showActionSheet方法,我怕又去官网看了下,官网现在说的是即将移除action-sheet标签,取而代之的是

showActionSheet,使用更加方便的交互反馈API代替,下面是官网更新日志的截图:


如果您觉得有用给个赞,祝您好运

愚蠢地人类
关注
专栏目录
小程序模态API--showActionSheet/showModal/showToast
lljxk2008的博客
07-27 1979
showActionSheet wx.showActionSheet调用此函数, 此API的功能是: 显示操作菜单 先创建一个按钮: <button size='mini' bindtap='showAction'>按钮</button> 触发事件: showAction : function(e) { wx.showActionSheet({ ...
微信小程序 - action-sheet 与 picker选择器
博客颜色
11-29 1867
微信小程序 - 下拉列表的实现   微信小程序目前提供两种方式实现下拉列表：action-sheet 与 picker选择器   action-sheet   action-sheet 有两种方法实现下拉，第一种使用action-sheet 标签，第二种是使用wx.showActionSheet方法   （1）action-sheet 标签   <action-she...
微信小程序API之showActionSheet（操作菜单）
...
06-04 1785
微信小程序API之showActionSheet（操作菜单） wxml： <button bindtap="cd01">操作菜单01</button> <button bindtap="cd02">操作菜单02</button> js： Page({ data: { chengshi:["浙江","广东","北京"] }, cd01:function(){ wx.showActionShe
推荐开源项目：ActionSheet - 安卓上的优雅操作表组件
最新发布
gitblog_01135的博客
08-09 527
推荐开源项目：ActionSheet - 安卓上的优雅操作表组件 android-ActionSheetiOS UIActionSheet for Android项目地址:https://gitcode.com/gh_mirrors/an/android-ActionSheet 在移动应用开发中，我们经常遇到需要向用户展示一系列选项的情况，这时，iOS 的 UIActionSheet 组件就显得...
微信小程序 使用列表功能showActionSheet
速冻的博客
09-09 3767
// pages/index/index.js //这里是js页面 Page ({ data: { lp:["斋藤飞鸟","桥本环奈","林允儿"] //在data中以数组形式写入3个lp }, send :function() { //编写功能 var lp = this.data.lp; //实体化 以便调用 wx.showAction...
微信小程序底部弹框 showActionSheet
代码小疯子
12-01 3369
微信小程序 通过 wx.showActionSheet()方法来实现底部弹框效果
小程序-音乐播放器 showActionSheet的使用
qq_35828720的博客
06-15 447
小程序实现简单的音乐播放功能：1，showActionSheet显示下侧弹窗效果2，wx.playBackgroundAudio实现音乐播放先看实现的效果：代码如下： showAction:function(){ wx.showActionSheet({ itemList: this.data.items, success: function (res) { ...
show-action-sheet.zip
03-27
- 可以创建一个名为 "show-action-sheet" 的组件，通过接收props传递选项列表和其他配置，然后在内部调用 `uni.showActionSheet`。 3. **事件处理**： - 在使用 `uni.showActionSheet` 后，我们需要监听其返回的...
van-action-sheet 放在form表单中，选中后自动提交
qq_846784996的博客
01-18 5216
解决方案： 增加 form 提交 element-form @submit.native.prevent <el-form @submit.native.prevent> <van-button type="info" @click="showActionSheet">弹出菜单</van-button> <van-actio...
uniapp 微信小程序 uview u-picker和u-action-sheet的层级问题/解决覆盖问题
树上骑个猴的博客
05-13 4226
我的场景： 点击按钮拉起u-action-sheet，此时再点击按钮拉起u-picker，结果发现u-picker在u-action-sheet的下面，被遮盖了。 解决方案： 给他们包裹一层容器，给他们的容器设置布局和层级。 <template style="position: absolute;z-index: 100;" v-if="isShowPageRangeComponent"> <u-picker ref="uPicker" class="picker-height" :im
可改变样式的自定义ActionSheet
04-04
这是一个带标题、可改变样式的自定义ActionSheet，源码iOS-Custom-ActionSheet，基于原生的ActionSheet有时达不到设计的要求，只好自定义。FDactionSheet可以带标题，也可以改变按钮等的样式，从而满足需求。...
微信小程序开发问答《七十八》 showActionSheet 如何调用分享 & button 标签的边框如
03-29
1、微信小程序 showActionSheet 如何调用分享 A：目前只有调用onShareAppMessage或者通过给button组件设置属性open-type="share"发起分享, showActionSheet或者其他接口中的回调中调用不了分享，可以用自定义的操作菜单利用button调用   2、微信小程序，用js还是wxs？   微信小程序，在看官网文档的wxs章节，有如下疑惑 文章中说明 1. wxs 不依赖于运行时的基础库版本，可以在所有版本的小程序中运行。 2. wxs 与 javascript 是不同的语言，有自己的语法，并不和 javascript 一致。 3. wxs
小程序极速实战开发《十七》action-sheet显示操作菜单
03-29
组件说明: 显示操作菜单   组件用法： (此图片来源于网络，如有侵权，请联系删除! )   wxml ... wx.showActionSheet({  itemList:itemList,  success: function (res) {  if (!res.cancel) {  
微信小程序使用show-actionSheet组件实现转发功能
RAVEEE的博客
12-21 1751
通过微信小程序官方文档，我们发现只能通过 官方提供button的组件来完成转发功能。 那么如何通过show-actionSheet组件来实现转发功能。 如图所示： 代码实现： 其中wxml文件 &amp;amp;amp;amp;lt;action-sheet hidden=&amp;amp;amp;quot;{{actionSheetHidden}}&amp;amp;amp;quot; bindchange=&amp;amp;amp;qu
微信小程序----wx.showActionSheet(OBJECT)操作菜单（MUI操作表）
热门推荐
止于至善
01-04 4万+
DEMO下载 效果图 实现 利用了微信小程序的wx.showActionSheet(OBJECT)操作菜单API实现菜单操作； 利用wx.chooseVideo录制视频； 利用wx.chooseImage选取本地图片； 利用wx.previewImage进行图片预览。 WXML view class=&amp;quot;tui-content&amp;quot;&amp;gt; view class=&
小程序wx.showActionSheet()操作菜单
新芽
09-17 6528
<view class="tui-content"> <view class="tui-show-name"> <text class="tui-card-btn" bindtap="openActionsheet">打开actionsheet</text> </view> </view> <view class="tui-fixed-foot"> <text class="tui-card-btn
小程序showActionSheet弹起选择器
hql1024的博客
06-11 709
wx.showActionSheet({ itemList: ['编辑圈子', '管理圈友', '账户管理'], success: function(res) { if (!res.cancel) { console.log(res.tapIndex) } } });
wx.showActionSheet() 选择菜单
GetcharZp的博客
01-09 663
wx.showActionSheet() 选择菜单 样式截图： 示例代码： wx.showActionSheet({ itemList: ['A', 'B', 'C'], success (res) { console.log(res.tapIndex) }, fail (res) { console.log(res.errMsg) } }) ...
ActionSheet/列表提示框 的使用
Hanyang Li的专栏
06-02 446
ActionSheet/列表提示框 的使用
uniapp van-action-sheet
09-20
`uniapp`中的`van-action-sheet`是一个基于Vue.js和uni-app的组件库`Vant`中的一个组件，用于展示一个上拉菜单。 `van-action-sheet`的使用步骤如下： 1. 首先，在uni-app项目中安装`Vant`组件库。可以通过npm安装，命令如下： ``` npm install vant@next -S ``` 2. 在需要使用`van-action-sheet`的页面或组件中引入该组件，示例代码如下： ```vue <template> <view> <van-button @click="showActionSheet">显示上拉菜单</van-button> <van-action-sheet :show="show" actions="{{ actions }}" cancel-text="取消" @select="onSelect" @cancel="onCancel" ></van-action-sheet> </view> </template> <script> import { ref } from 'vue'; export default { setup() { const show = ref(false); const actions = ref([ { name: '选项1' }, { name: '选项2' }, { name: '选项3' }, ]); const showActionSheet = () => { show.value = true; }; const onSelect = (event) => { console.log('选择了', event.detail.name); show.value = false; }; const onCancel = () => { show.value = false; }; return { show, actions, showActionSheet, onSelect, onCancel, }; }, }; </script> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值