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

最新推荐文章于 2023-11-07 11:17:20 发布
最新推荐文章于 2023-11-07 11:17:20 发布
阅读量1.1k 收藏
点赞数
分类专栏： 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jarisMA/article/details/100105894
版权
本文详细介绍了微信小程序中action-sheet组件的使用方法，包括wxml和js的相关配置与交互，帮助开发者实现下拉菜单功能。
摘要由CSDN通过智能技术生成

微信小程序 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="
最低0.47元/天 解锁文章
jarisMA
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 移动端项目 一级反馈面板标签准备（实现简单功能）
weixin_59519449的博客
04-03 2095
实现效果： 点击 文章上的叉叉就会出现反馈面板 在 vant 组件当中找到 反馈组件中 的动作画板，在main.js里引入即可！！ 在 AriticleItem.vue 的组件，即文章的页面， 当中去导入我们需要使用的组件 <van-action-sheet v-model="show" :actions="actions" @select="onSelect" /> 在反馈组件中，绑定点击事件 在data 里边进行存放数据 data(){ retu..
【Vant Weapp】van-action-sheet 动作面板
joanmelon的博客
01-24 5140
触发的地方展示的弹窗cancel-text="取消"/>.title {}data:{list: [{name: '周',id: 0},{name: '月',id: 1},{name: '季',id: 2},{name: '年',id: 3}],active:0,activeName:'周',}onOpen() {},},})// 选择结束后获取列表},
频道列表模块 (一) -准备组件-ActionSheet 上拉菜单组件-自定义面板模式 & 我的频道和可选频道的展示- 删除图标的切换
weixin_44867717的博客
03-03 1271
准备组件-ActionSheet 上拉菜单组件-自定义面板模式 & 我的频道和可选频道的展示- 删除图标的切换 使用组件：src/views/home/index.vue //控制频道编辑显示与隐藏 showEditChannel: false //频道编辑 <channel-edit v-model="showEditChannel"></channel-edit&g...
微信小程序自定义弹窗组件 action-sheet
越陌度阡
12-14 1103
最近公司在开发短剧小程序，短剧的剧集展示交互需要用到组件 action-sheet，小程序自带的有这个组件，但是这个组件支持的功能比较单一，相当于是一个选择表一样，不能自定义很多内容，只能自定义一个组件来使用，以下是组件的实现。
vantWeapp使用动作面板(van-action-sheet)时数组动态添加编辑数据
zhudingfengshen的博客
12-11 3518
项目背景：在实现如下功能时，我们想要实现点击电话按钮实现弹出电话号码面板并点击拨打电话。但是后台返回的电话号码数据并不是数组，因为我们要对data值进行动态添加。 数据格式 对应代码 <van-action-sheet show="{{ show }}" actions="{{ actions }}" cancel-text="取消" bind:cancel="onClose" bind:close="onClose" bind:select="onSelect" /> dat
微信小程序（二十二）action-sheet组件详细介绍
09-01
微信小程序的Action-Sheet组件是一种常见的交互元素，它模拟了iOS设计中的下拉菜单功能，用于展示一系列可选项供用户选择。在微信小程序中，Action-Sheet通常用于在底部弹出一个包含多个操作的列表，用户点击后执行...
微信小程序 action-sheet详解及实例代码
11-29
在微信小程序开发中，`action-sheet` 是一个非常重要的组件，用于展示底部弹出的菜单列表，常用于用户需要在多个选项中进行选择的情况。在本文中，我们将深入探讨 `action-sheet` 的各项特性和使用方法，以及如何...
微信小程序 action-sheet 反馈上拉菜单简单实例
08-30
在这个简单的实例中，我们将深入理解如何在微信小程序中使用 `action-sheet` 组件来创建一个反馈上拉菜单。 首先，`action-sheet` 通常与按钮交互触发。在示例代码中，我们看到一个类型为 "default" 的按钮，通过...
微信小程序 action-sheet底部菜单详解
09-01
微信小程序的Action-Sheet组件是一种常用的用户交互控件，它设计用于从屏幕底部弹出一个选择菜单，提供多个选项供用户选择。Action-Sheet适用于在有限的空间内展示多个操作选项，比如在移动设备上，当用户需要进行多...
【前端】van-tab 的animated属性与van-action-sheet的滑动动画会冲突导致van-action-sheet显示异常
sharkrubbish的博客
05-11 1725
vant3组件属性小冲突
van-action-sheet 放在form表单中，选中后自动提交
qq_846784996的博客
01-18 5204
解决方案： 增加 form 提交 element-form @submit.native.prevent <el-form @submit.native.prevent> <van-button type="info" @click="showActionSheet">弹出菜单</van-button> <van-actio...
微信小程序 Flex局部元素被挤压问题
weixin_30909575的博客
05-15 1501
关于Flex布局不在此处赘述，需要了解的可以查阅官方文档：基本的布局方法——Flex布局 当使用Flex布局，想实现如下图1的效果时，代码编写如下： 图1： <!-- wxml文件 --> <view class='test-view'> <view class='title'>标题:</view> ...
vue 集成高德地图，点击图标，弹出van-action-sheet，一闪而过的问题探究
最新发布
jifashihan的博客
11-07 712
后来和公司前端大佬交流，找到了问题，地图图标点击的时候，会刷新地图，van-action-sheet刚弹出来，地图刷新了，van-action-sheet就消失了，所以才出现一闪而过，这样就好解决了，在点击事件里边，加一个延时，刷新完了，在弹出对话框。地图图标点击，然后呢，设置sheetShow 为true，弹出van-action-sheet，逻辑上是没错的，我把这个代码放在地图外的控件，是可以正确弹出对话框的，然后在浏览器模式下，是正常能弹出的，切换成手机模式，又不能弹出。
vue使用van-popup和van-action-sheet
a347867019的博客
04-02 4320
vant的滑块的使用 加一个充值滑块 <van-popup v-model="show" bind:close="onClose" position="bottom" custom-style="height: 20%;" class="rechange"> <p>充值金额</p> <div> ... </div>...
vant之解决action-sheet点击取消和遮罩层的bug
KID963931445的博客
07-09 7633
vant出现点击取消按钮出现了冒泡事件，点击遮罩层，面盘弹不回去。解决代码如下： vant官方文档提供了click-overlay事件来监听遮罩被点击的事件。 <van-action-sheet @click="stopPro($event)" @click-overlay="overlay" ></van-action-sheet> methods:{ stopPro(e){ e.stopPropraation(); //组织冒泡 e.preventDefaut
微信小程序——操作反馈小工具：action-sheet的使用及详解
啊哈嗯嗯的博客
04-08 5424
action-sheet——底部弹起的操作按钮组件 属性： bindchange：点击“取消” 或 “背景蒙层”所触发的事件 hidden：action-sheet是否可见 <action-sheet-item bindtap="itemTap" data-name="{{item.name}}" data-id="{{item.id}}"> {{item.name}}&lt...
微信小程序：有赞小程序UI( vant-weapp ) actionsheet组件源码窥探
热门推荐
weixin_39015132的博客
09-06 3万+
原文链接 前言 还是微信小程序项目，虽然有一些优秀的第三方组件，但是秉持高度还原UI设计稿的原则，没有直接在项目中使用。遇到一些类似的逻辑时，可以参考一下这些开源项目的实现方式。难的往往只是某一个点，有时候我们需要的只是一张地图（PS:来自硬派脱口秀节目《知识就是力量》）。 开始 为什么研究actionsheet组件？ 因为项目中设计较多的交互动画，想要自己同一封装，可多处使用。一方面可...
使用Vant完成底部弹出框 ActionSheet 上拉菜单
柠檬不萌只是酸i
09-15 1万+
效果图： 代码展示：（ActionSheet 上拉菜单） <template> <!-- ActionSheet 上拉菜单 --> <div id="action_sheet"> <van-button type="primary" @click="alertMenu">弹出菜单</van-button> ...
微信小程序recycle-view组件，js实现置顶
06-08
要实现微信小程序的recycle-view组件的置顶功能，可以使用scroll-view组件的scroll-top属性和scroll-into-view属性结合使用。 首先，在recycle-view组件中设置一个置顶按钮，当用户点击该按钮时，获取到recycle-view组件实例并设置scroll-top属性为0，即可将recycle-view组件滚动到顶部。 具体实现步骤如下： 1. 在wxml文件中添加置顶按钮： ``` <view class="top-btn" bindtap="scrollTop">置顶</view> ``` 2. 在js文件中定义scrollTop方法，获取到recycle-view组件实例并设置scroll-top属性为0： ``` // 获取recycle-view组件实例 const query = wx.createSelectorQuery().in(this) query.select('#recycle-view').boundingClientRect((res) => { // 设置scroll-top属性为0，即可将recycle-view组件滚动到顶部 this.setData({ scrollTop: 0 }) }).exec() ``` 3. 在scroll-view组件中设置scroll-into-view属性为一个固定值，当recycle-view组件滚动到该位置时，置顶按钮会显示出来： ``` <scroll-view class="scroll-view" scroll-y scroll-into-view="top" scroll-top="{{scrollTop}}"> <!-- recycle-view组件 --> <recycle-view id="recycle-view" ...></recycle-view> </scroll-view> ``` 需要注意的是，scroll-into-view属性的值需要与置顶按钮的id值相同。 以上就是微信小程序recycle-view组件js实现置顶的方法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值