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

2024-02-03 22:29:11

微信小程序开发文档，相关文章：

微信小程序 action-sheet

微信小程序 modal

微信小程序 toast

微信小程序 loading

微信小程序 action-sheet

属性名	类型	默认值	说明
hidden	Boolean	true	是否隐藏
bindchange	EventHandle		点击背景或action-sheet-cancel按钮时触发change事件，不携带数据

action-sheet-item

底部菜单表的子选项。

action-sheet-cancel

底部菜单表的取消按钮，和action-sheet-item的区别是，点击它会触发action-sheet的change事件，并且外观上会同它上面的内容间隔开来。

示例代码：

<button type="default" bindtap="actionSheetTap">弹出action sheet</button>
<action-sheet hidden="{{actionSheetHidden}}" bindchange="actionSheetChange">
 <block wx:for-items="{{actionSheetItems}}">
 <action-sheet-item class="item" bindtap="bind{{item}}">{{item}}</action-sheet-item>
 </block>
 <action-sheet-cancel class="cancel">取消</action-sheet-cancel>
</action-sheet>

var items = ['item1', 'item2', 'item3', 'item4']
var pageObject = {
 data: {
 actionSheetHidden: true,
 actionSheetItems: items
 },
 actionSheetTap: function(e) {
 this.setData({
 actionSheetHidden: !this.data.actionSheetHidden
 })
 },
 actionSheetChange: function(e) {
 this.setData({
 actionSheetHidden: !this.data.actionSheetHidden
 })
 }
}

for (var i = 0; i < items.length; ++i) {
 (function(itemName) {
 pageObject['bind' + itemName] = function(e) {
 console.log('click' + itemName, e)
 }
 })(items[i])
}

Page(pageObject)
action-sheet

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

微信小程序 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
微信小程序 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组件是从底部弹出可选菜单项,估计也是借鉴IOS的设计添加的,action-sheet有两个子组件, action-sheet-item为每个选项,action-sheet-cancel取消选项,与action-sheet-item中间会有间隔,并且点击会触发action-sheet监听事件主要属性: wxml  <button type="primary" bindtap="listen
微信小程序 WXDropDownMenu组件详解及实例代码

微信小程序 WXDropDownMenu组件详解,这里给个小的示例,帮助大家学习理解, 功能: 适用于商品列表筛选与功能菜单跳转先来看下效果图: 思路与步骤: 布局方面,整体使用dl来写,二级包在dd中,用ul li来写:交互方面,点击某一级菜单,关闭兄弟子菜单,点击某子菜单关闭所有菜单. 1.使用dt做出第一级菜单 2.使用dd嵌套第二级菜单,初始隐藏.position为absolute,使用z-index浮出页面层 /*总菜单容器*/ .menu { display: block; hei
微信小程序 require机制详解及实例代码

微信小程序 require机制详解一, JS模块加载:一次性加载全部JS, 但并不一定立即执行. 先提一提微信小程序架构: 类浏览器 -> HTTP本地服务 -> 云端服务微信小程序运行的架构,基本上是浏览器 -> HTTP本地服务 -> 云端服务, HTTP本地服务用来读取本地文件或者代理云端的文件资源.读取项目中JS文件, 是由HTTP本地服务取本地存储的脚本文件. 似乎比较简单,一个HTML 引用所有JS文件既然采用了这种架构,那微信小程序就类似浏览器那样,借助一个HT
微信小程序 template模板详解及实例代码

微信小程序 template模板详解如下图,我在做华企商学院小程序的时候,课程搜索结果页和课程列表页结构是完全一样的,这时就非常适合使用模板来完成页面搭建.实现一次定义,到处使用. 模板一.定义模板 1.新建一个template文件夹用来管理项目中所有的模板: 2.新建一个courseList.wxml文件来定义模板: 3.使用name属性,作为模板的名字.然后在<template/>内定义代码片段. 注意: a.可以看到一个.wxml文件中可以定义多个模板,只需要通过name来区分: b
微信小程序 swiper组件详解及实例代码

微信小程序 swiper组件常用属性: 效果图: swiper.wxml添加代码: <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}} " bindchange="bindchangeTag"> <block wx
微信小程序 canvas API详解及实例代码

绘图是每个移动应用必备的技术,基本上和Android,IOS,等移动开发都是相同的,创建个上下文,给你个画布再上画,官网给的小例子都比较全了自己去看吧,drawImage时没有反应不知道是BUG还是电脑不能测试待定,http://wxopen.notedown.cn/api/api-canvas.html 屏幕就像是数学上的坐标轴,且在第四象限,以屏幕左上角为圆点,X轴向右为正向左为负,Y轴向下为正向上为负(这点和数学上相反的)以圆点为基点画个距离圆点上下50宽高100的矩形来演示canvas基
微信小程序 animation API详解及实例代码

动画水还是比较深的,这里只是简单介绍下小程序中动画的一些属性和注意事项,做动画前一定要整理好思路将动画一步步分解,再进行组合!这里只做引入. wx.createAnimation(object) 看官方介绍 1.创建一个动画实例animation.调用实例的方法来描述动画.最后通过动画实例的export方法导出动画数据传递给组件的animation属性. 2.调用动画操作方法后要调用 step() 来表示一组动画完成,可以在一组动画中调用任意多个动画方法,一组动画中的所有动画会同时开始,一组动画
微信小程序 video组件详解及实例代码

视频播放组件与图片加载组件也没啥差别,使用起来也没啥注意的重要属性: wxml  <button bindtap="listenerButton">点击显示视频组件</button>  <video src="http://mvvideo1.meitudata.com/575c2b652d7375255.mp4&q
微信小程序 Audio API详解及实例代码

没啥可值得太注意的地方重要属性: 1. wx.getBackgroundAudioPlayerState(object) 获取播放状态 2.wx.playBackgroundAudio(object)播放音乐 3.wx.pauseBackgroundAudio()暂停音乐 4.wx.seekBackgroundAudio(object) 设置播放进度 5.wx.stopBackgroundAudio()停止播放音乐三个监听器: wxml <button type="primary&qu
微信小程序 Record API详解及实例代码

其实这个API也挺奇葩的,录音结束后success不走,complete不走,fail也不走, 不知道是不是因为电脑测试的原因,只能等公测或者等他们完善.以后再测和补充吧!!!! 主要属性: wx.startRecord(object) 手动调用wx.stopRecord()停止录音 wxml  <text>{{formatRecordTime}}</text> <button type="primary" bindt
微信小程序 progress组件详解及实例代码

主要属性: 效果图: ml: <View >  <Text class="text-style">百分比是30,并在进度条右侧显示百分比</Text> <progress percent="30" show-info />  <Text class="text-style&quo

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

相关推荐

随机推荐