微信小程序实现action-sheet弹出底部菜单功能【附源码下载】


Posted in Javascript onDecember 09, 2017

本文实例讲述了微信小程序实现action-sheet弹出底部菜单功能。分享给大家供大家参考,具体如下:

1、效果展示

微信小程序实现action-sheet弹出底部菜单功能【附源码下载】

2、关键代码

① index.wxml

<button type="default" bindtap="actionSheetTap">弹出action sheet</button>
<action-sheet hidden="{{actionSheetHidden}}" bindchange="actionSheetbindchange">
  <block wx:for-items="{{actionSheetItems}}" wx:key="{{txt}}">
    <action-sheet-item bindtap="bind{{item.bindtap}}">{{item.txt}}</action-sheet-item>
  </block>
  <action-sheet-cancel class="cancel">取消</action-sheet-cancel>
</action-sheet>
<view>
  提示:您选择了菜单{{menu}}
</view>

② index.js

Page({
 data:{
  // text:"这是一个页面"
  actionSheetHidden:true,
  actionSheetItems:[
   {bindtap:'Menu1',txt:'菜单1'},
   {bindtap:'Menu2',txt:'菜单2'},
   {bindtap:'Menu3',txt:'菜单3'}
  ],
  menu:''
 },
 actionSheetTap:function(){
  this.setData({
   actionSheetHidden:!this.data.actionSheetHidden
  })
 },
 actionSheetbindchange:function(){
  this.setData({
   actionSheetHidden:!this.data.actionSheetHidden
  })
 },
 bindMenu1:function(){
  this.setData({
   menu:1,
   actionSheetHidden:!this.data.actionSheetHidden
  })
 },
 bindMenu2:function(){
  this.setData({
   menu:2,
   actionSheetHidden:!this.data.actionSheetHidden
  })
 },
 bindMenu3:function(){
  this.setData({
   menu:3,
   actionSheetHidden:!this.data.actionSheetHidden
  })
 }
})

3、源代码点击此处本站下载

希望本文所述对大家微信小程序开发有所帮助。

Javascript 相关文章推荐
JAVASCRIPT对象及属性
Feb 13 Javascript
js 纯数字不重复排列的另类方法
Jul 17 Javascript
用jquery统计子菜单的条数示例代码
Oct 18 Javascript
js数组常见操作及数组与字符串相互转化实例详解
Nov 10 Javascript
jQuery EasyUI菜单与按钮详解
Jul 13 Javascript
JS实现保留n位小数的四舍五入问题示例
Aug 03 Javascript
AngularJS表单基本操作
Jan 09 Javascript
jQuery实现选中行变色效果(实例讲解)
Jul 06 jQuery
Angular4绑定html内容出现警告的处理方法
Nov 03 Javascript
vue 实现cli3.0中使用proxy进行代理转发
Oct 30 Javascript
Echarts实现多条折线可拖拽效果
Dec 19 Javascript
基于JS实现视频上传显示进度条
May 12 Javascript
微信小程序使用toast消息对话框提示用户忘记输入用户名或密码功能【附源码下载】
Dec 09 #Javascript
微信小程序loading组件显示载入动画用法示例【附源码下载】
Dec 09 #Javascript
Angular中点击li标签实现更改颜色的核心代码
Dec 08 #Javascript
Javascript中的作用域及块级作用域
Dec 08 #Javascript
Vue中自定义全局组件的实现方法
Dec 08 #Javascript
Vue中的Vux配置指南
Dec 08 #Javascript
利用10行js代码实现上下滚动公告效果
Dec 08 #Javascript
You might like
第九节 绑定 [9]
2006/10/09 PHP
PHP生成条形图的方法
2014/12/10 PHP
php数组索引与键值操作技巧实例分析
2015/06/24 PHP
PHP XML Expat解析器知识点总结
2019/02/15 PHP
JavaScript 动态创建VML的方法
2009/10/14 Javascript
jquery $.ajax各个事件执行顺序
2010/10/15 Javascript
纯JS实现五子棋游戏兼容各浏览器(附源码)
2013/04/24 Javascript
a标签的href和onclick 的事件的区别介绍
2013/07/26 Javascript
jQuery中toggle()函数的使用实例
2015/04/17 Javascript
js 判断所选时间(或者当前时间)是否在某一时间段的实现代码
2015/09/05 Javascript
JS上传组件FileUpload自定义模板的使用方法
2016/05/10 Javascript
JS中split()用法(将字符串按指定符号分割成数组)
2016/10/24 Javascript
angular-ui-sortable实现可拖拽排序列表
2016/12/28 Javascript
JS同步、异步、延迟加载的方法
2018/05/05 Javascript
[原创]微信小程序获取网络类型的方法示例
2019/03/01 Javascript
js设计模式之单例模式原理与用法详解
2019/08/15 Javascript
Node.js API详解之 util模块用法实例分析
2020/05/09 Javascript
vue实现学生信息管理系统
2020/05/30 Javascript
vite2.0+vue3移动端项目实战详解
2021/03/03 Vue.js
[26:50]2018完美盛典DOTA2表演赛
2018/12/17 DOTA
python 实现tar文件压缩解压的实例详解
2017/08/20 Python
Python3内置模块之json编解码方法小结【推荐】
2020/12/09 Python
opencv 图像滤波(均值,方框,高斯,中值)
2020/07/08 Python
Python3+Django get/post请求实现教程详解
2021/02/16 Python
html5 canvas实现跟随鼠标旋转的箭头
2016/03/11 HTML / CSS
阿迪达斯法国官方网站:adidas法国
2018/03/20 全球购物
白俄罗斯大卖场:21vek.by
2019/07/25 全球购物
巴西24小时在线药房:Drogasil
2020/06/20 全球购物
android面试问题与答案
2016/12/27 面试题
高中毕业自我鉴定范文
2013/10/02 职场文书
群众路线教育实践活动心得体会(四风)
2014/11/03 职场文书
优秀员工自荐书
2015/03/06 职场文书
就业推荐表院系意见
2015/06/05 职场文书
遗嘱范文
2015/08/07 职场文书
Redis入门教程详解
2021/08/30 Redis
oracle删除超过N天数据脚本的方法
2022/02/28 Oracle