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

2024-09-27 18:03:19

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

主要属性：

wxml

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

 <block wx:for-items="{{actionSheetItems}}" >
  <action-sheet-item >{{item}}</action-sheet-item>
 </block>
 <!--自动隐藏action-sheet-->
 <action-sheet-cancel>取消</action-sheet-cancel>
</action-sheet>

Page({
 data:{
 // text:"这是一个页面"
 actionSheetHidden: true,
 actionSheetItems: ['item1', 'item2', 'item3']

 },

 listenerButton: function() {
  this.setData({
  //取反
   actionSheetHidden: !this.data.actionSheetHidden
  });
 },

 listenerActionSheet:function() {
 this.setData({
  actionSheetHidden: !this.data.actionSheetHidden
 })
 },

 onLoad:function(options){
 // 页面初始化 options为页面跳转所带来的参数
 },
 onReady:function(){
 // 页面渲染完成
 },
 onShow:function(){
 // 页面显示
 },
 onHide:function(){
 // 页面隐藏
 },
 onUnload:function(){
 // 页面关闭
 }
})

相关文章：

hello WeApp                    icon组件
Window                            text组件                                switch组件
tabBar底部导航               progress组件                        action-sheet
应用生命周期                    button组件                            modal组件
页面生命周期                    checkbox组件                      toast组件
模块化详                     form组件详                     loading 组件
数据绑定                           input 组件                             navigator 组件
View组件                         picker组件                            audio 组件
scroll-view组件                 radio组件                        video组件
swiper组件                       slider组件                            Image组件

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

微信小程序开发文档,相关文章: 微信小程序 action-sheet 微信小程序 modal 微信小程序 toast 微信小程序 loading 微信小程序 action-sheet 属性名类型默认值说明 hidden Boolean true 是否隐藏 bindchange EventHandle 点击背景或action-sheet-cancel按钮时触发change事件,不携带数据 action-sheet-item 底部菜单表的子选项. action-sheet-cance
微信小程序 action-sheet 反馈上拉菜单简单实例

微信小程序 action-sheet 反馈上拉菜单简单实例看下实现效果图: js var items = ['item1', 'item2', 'item3', 'item4'] var pageObject = { data: { actionSheetHidden: true, actionSheetItems: items }, actionSheetTap: function (e) { this.setData({ actionSheetHidden: !this.data.acti
微信小程序 action-sheet底部菜单详解

微信小程序 action-sheet action-sheet是从底部弹出的选择菜单,子菜单通过action-sheet-item和action-sheet-cancel指定,action-sheet-item是菜单项,action-sheet-cancel顾名思义是取消隐藏菜单,我们可以通过为action-sheet-item添加bindtap来触发点击后作出的相应,点击action-sheet-cancel时会触发action-sheet的bindchange事件.可以在bindchange
微信小程序（十四）button组件详细介绍

button按钮用的算是最普遍的组件之一. 主要属性: wxml  <button type="defaule" bindtap="clickButton">Defalut</button>  <button type="primary" disabled="true" loading=
微信小程序（十五）checkbox组件详细介绍

不得不吐糟下checkbox默认样式真是有点略丑!!!checkbox组件为一个多选框被放到checkbox-group组中,并在checkbox-group(只能包含checkbox)中设置监听事件. checkbox-group监听方法: checkbox多选属性: wxml  <checkbox-group bindchange="listenChec
微信小程序（十六）form组件详细介绍

form表单组件是提交form内的所有选中属性的值,注意每个form表单内的组件都必须有name属性指定否则提交不上去,button中的type两个submit,reset属性分别对应form的两个事件主要属性: wxml <form bindsubmit="listenFormSubmit" bindreser="listenFormReser" > <checkbox-group name="checkbox" bind
微信小程序（十八）picker组件详细介绍

picker选择器分为三种,普通选择器,时间选择器, 日期选择器用mode属性区分,默认是普通选择器.测试时时间和日期点击无反应不知道是BUG还是啥!没法手机测试现在也不知道咋回事!! 主要属性: 普通选择器时间选择器日期选择器 wxml <view>普通选择器</view>  <picker mode="selector"
微信小程序（十九）radio组件详细介绍

radio组件为单选组件与radio-group组合使用,使用方式和checkbox没啥区别主要属性: wxml  <radio-group bindchange="listenerRadioGroup">  <label style="display: flex" wx:for-items="{{a
微信小程序（十二）text组件详细介绍

通常文本设置要不在wxml中设置,再要不就是通过weml绑定在js中设置文字. wxml <view > <text>我是文本组件</text> </view> <text>{{text}}</text> js Page({ /** * 初始化数据 */ data:{ text:"我是在js文件中绑定的文本" }, onLoad:function(options){ // 页面初始化 options为页面跳转所带来
微信小程序（三）tabBar底部导航详细介绍

tabBar相对而言用的还是比较多的,但是用起来并没有难,在app.json中配置下tabBar即可,注意tabBar至少需要两个最多五个Item选项主要属性: 对于tabBar整体属性设置: 对于tabBar中每个Item属性设置: 下面是官网一张图对tabBar描述: app.json的配置相对就简单了: 相关文章: hello WeApp icon组件 Window text组件
微信小程序（五）页面生命周期详细介绍

这里只要熟悉页面的基本生命周期即可,业务在指定生命周期函数内书写. 以下是官网给出的生命周期函数方法和状态图上面的生周期函数图对于做Android 或者IOS的来书理解起来应该不是难事,具体怎么掌握只有慢慢尝试和摸索代码处理: 这里的代码主需要对使用创建项目时index目录下文件处理下就行,至于跳转后的页面用的还是logs不需要更改!下面贴下代码注释也比较详细 index.wxml  <view class="container"
微信小程序动态生成二维码的实现代码

效果图如下: 实现 wxml  <view class='container'> <image bindtap="previewImg" mode="scaleToFill" src="{{imagePath}}"></image> </view>  <view class=&qu
微信小程序缓存支持二次开发封装实现解析

这篇文章主要介绍了微信小程序缓存支持二次开发封装实现解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下简介微信小程序提供了缓存的api,包括同步和异步两种,具体api不多说明,可自行查看官方文档现在微信小程序缓存api存在一个问题就是没有设定过期时间,下面给大家介绍一下对小程序缓存的二次封装,使其支持设定过期时间实现方法先声明,这个并非原创方法,只是查找资料的时候看到的,觉得挺有用,就记录下来,也算转播给大家原作链接:https:/

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

相关推荐

随机推荐