微信小程序 action-sheet组件的使用

最新推荐文章于 2023-05-09 16:23:27 发布

原创

最新推荐文章于 2023-05-09 16:23:27 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了微信小程序中action-sheet组件的使用方法，包括wxml和js的相关配置与交互，帮助开发者实现下拉菜单功能。

微信小程序 action-sheet组件的使用

发布时间：2018-03-13 16:05:28

wxml

<!--触发actionSheet事件-->
<button type="primary" catchtap="actionSheet">
	弹出ActionSheet
</button>
<!--默认action-sheet为隐藏，由button触发-->
<action-sheet hidden="{
    
    {actionSheetHidden}}" catchchange="actionSheet

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

jarisMA

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue 移动端项目一级反馈面板标签准备（实现简单功能）

weixin_59519449的博客

04-03

2214

实现效果：点击文章上的叉叉就会出现反馈面板在 vant 组件当中找到反馈组件中的动作画板，在main.js里引入即可！！在 AriticleItem.vue 的组件，即文章的页面，当中去导入我们需要使用的组件 <van-action-sheet v-model="show" :actions="actions" @select="onSelect" /> 在反馈组件中，绑定点击事件在data 里边进行存放数据 data(){ retu..

vue 集成高德地图，点击图标，弹出van-action-sheet，一闪而过的问题探究

jifashihan的博客

11-07

901

后来和公司前端大佬交流，找到了问题，地图图标点击的时候，会刷新地图，van-action-sheet刚弹出来，地图刷新了，van-action-sheet就消失了，所以才出现一闪而过，这样就好解决了，在点击事件里边，加一个延时，刷新完了，在弹出对话框。地图图标点击，然后呢，设置sheetShow 为true，弹出van-action-sheet，逻辑上是没错的，我把这个代码放在地图外的控件，是可以正确弹出对话框的，然后在浏览器模式下，是正常能弹出的，切换成手机模式，又不能弹出。

参与评论您还未登录，请先登录后发表或查看评论

微信小程序（二十二）action-sheet组件详细介绍

09-01

主要介绍了微信小程序action-sheet组件详细介绍的相关资料,需要的朋友可以参考下

微信小程序自定义弹窗组件 action-sheet

分享前端工程化、动效魔法与性能之舞！

12-14

1462

最近公司在开发短剧小程序，短剧的剧集展示交互需要用到组件 action-sheet，小程序自带的有这个组件，但是这个组件支持的功能比较单一，相当于是一个选择表一样，不能自定义很多内容，只能自定义一个组件来使用，以下是组件的实现。

微信小程序ActionSheet与分享按钮

royal1235的博客

11-27

1726

ActionSheet就是下图展示：小程序有提供官方API，调用操作菜单还是比较简单的： wx.showActionSheet({ itemList: ['A', 'B', 'C'], success: function(res) { console.log(res.tapIndex) }, fail: function(res) { console.l...

微信小程序 action-sheet详解及实例代码

09-01

微信小程序的Action-Sheet组件是一种常见的用户交互控件，用于在屏幕底部展示一系列可选操作，通常用于在有限的空间内提供多个功能选择。这个组件在移动应用设计中非常常见，因为它能够有效地呈现多个操作选项，而...

微信小程序 action-sheet 反馈上拉菜单简单实例

08-30

在这个简单的实例中，我们将深入理解如何在微信小程序中使用 `action-sheet` 组件来创建一个反馈上拉菜单。首先，`action-sheet` 通常与按钮交互触发。在示例代码中，我们看到一个类型为 "default" 的按钮，通过...

微信小程序 action-sheet底部菜单详解

09-01

微信小程序的Action-Sheet组件是一种常用的用户交互控件，它设计用于从屏幕底部弹出一个选择菜单，提供多个选项供用户选择。Action-Sheet适用于在有限的空间内展示多个操作选项，比如在移动设备上，当用户需要进行多...

微信小程序把玩（二十二）action-sheet组件

热门推荐

FUCK

09-26

2万+

action-sheet组件是从底部弹出可选菜单项，估计也是借鉴IOS的设计添加的，action-sheet有两个子组件， action-sheet-item为每个选项，action-sheet-cancel取消选项，与action-sheet-item中间会有间隔，并且点击会触发action-sheet监听事件主要属性：wxml <button typ

微信小程序——操作反馈小工具：action-sheet的使用及详解

啊哈嗯嗯的博客

04-08

5922

action-sheet——底部弹起的操作按钮组件属性： bindchange：点击“取消” 或 “背景蒙层”所触发的事件 hidden：action-sheet是否可见 <action-sheet-item bindtap="itemTap" data-name="{{item.name}}" data-id="{{item.id}}"> {{item.name}}&lt...

微信小程序——【四】操作反馈（action-sheet,modal,toast,loading）

weixin_41550144的博客

04-29

629

操作反馈（action-sheet,modal,toast,loading） actions.wxml文件 <view class="container"> <action-sheet hidden="{{actionSheetHidden}}" bindchange="actionSheetChange"> <block wx:for=...

action page.php,微信小程序 action-sheet详解及实例代码

weixin_34278722的博客

03-25

251

这篇文章主要介绍了微信小程序 action-sheet详解及实例代码的相关资料,需要的朋友可以参考下微信小程序 action-sheet属性名类型默认值说明hiddenBooleantrue是否隐藏bindchangeEventHandle点击背景或action-sheet-cancel按钮时触发change事件，不携带数据action-sheet-item底部菜单表的子选项。action-s...

【Vant Weapp】van-action-sheet 动作面板

joanmelon的博客

01-24

7198

触发的地方展示的弹窗cancel-text="取消"/>.title {}data:{list: [{name: '周',id: 0},{name: '月',id: 1},{name: '季',id: 2},{name: '年',id: 3}],active:0,activeName:'周',}onOpen() {},},})// 选择结束后获取列表},

手写小程序 action-sheet

qq_44740736的博客

05-09

368

小程序中的 `` 不好看，我也改不了样式，所以就手写了一个网上手写的代码我也是感觉太麻烦，下面这种写法应该是非常简单易懂且自由度非常高的了

微信小程序使用Vant在ActionSheet 无法实现取消操作的解决方案

weixin_52710755的博客

10-10

1781

微信小程序使用Vant在ActionSheet 无法实现取消操作的解决方案

vantWeapp使用动作面板(van-action-sheet)时数组动态添加编辑数据

zhudingfengshen的博客

12-11

3951

项目背景：在实现如下功能时，我们想要实现点击电话按钮实现弹出电话号码面板并点击拨打电话。但是后台返回的电话号码数据并不是数组，因为我们要对data值进行动态添加。数据格式对应代码 <van-action-sheet show="{{ show }}" actions="{{ actions }}" cancel-text="取消" bind:cancel="onClose" bind:close="onClose" bind:select="onSelect" /> dat

频道列表模块 (一) -准备组件-ActionSheet 上拉菜单组件-自定义面板模式 & 我的频道和可选频道的展示- 删除图标的切换

weixin_44867717的博客

03-03

1437

准备组件-ActionSheet 上拉菜单组件-自定义面板模式 & 我的频道和可选频道的展示- 删除图标的切换使用组件：src/views/home/index.vue //控制频道编辑显示与隐藏 showEditChannel: false //频道编辑 <channel-edit v-model="showEditChannel"></channel-edit&g...

van-action-sheet 性别选择

@you的博客

10-12

1010

效果图： <van-cell title="性别" is-link :value="personInfo.stuSex == 0 ? '男' : '女'" @click="isEditGenderShow=true"></van-cell> <van-action-sheet v-model="isEditGenderShow" :actions="actions" cancel-text="取消" close-on-click-actio.

【前端】van-tab 的animated属性与van-action-sheet的滑动动画会冲突导致van-action-sheet显示异常

sharkrubbish的博客

05-11

2030

vant3组件属性小冲突

微信小程序mp-actionSheet使用