微信小程序实现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 相关文章推荐
js下写一个事件队列操作函数
Jul 19 Javascript
JS获取页面窗口大小的代码解读
Dec 01 Javascript
jQuery学习总结之jQuery事件
Jun 30 Javascript
基于vue.js实现图片轮播效果
Dec 01 Javascript
12 款 JS 代码测试必备工具(翻译)
Dec 13 Javascript
jquery.uploadView 实现图片预览上传功能
Aug 10 jQuery
微信小程序button组件使用详解
Jan 31 Javascript
vue双向数据绑定知识点总结
Apr 18 Javascript
Vue监听数据渲染DOM完以后执行某个函数详解
Sep 11 Javascript
vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法示例
Mar 13 Javascript
基于jQuery实现可编辑的表格
Dec 11 jQuery
JavaScript canvas实现雪花随机动态飘落
Feb 08 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
dede3.1分页文字采集过滤规则详说(图文教程)续二
2007/04/03 PHP
PHP技术开发微信公众平台
2015/07/22 PHP
隐藏Nginx或Apache以及PHP的版本号的方法
2016/01/03 PHP
比较完整的微信开发php代码
2016/08/02 PHP
php 截取utf-8格式的字符串实例代码
2016/10/30 PHP
php提高脚本性能的4个技巧
2020/08/18 PHP
javascript学习笔记(九) js对象 设计模式
2012/06/19 Javascript
js如何判断不同系统的浏览器类型
2013/10/28 Javascript
jquery+CSS实现的水平布局多级网页菜单效果
2015/08/24 Javascript
js游戏人物上下左右跑步效果代码分享
2015/08/28 Javascript
jquery validate demo 基础
2015/10/29 Javascript
javascript之with的使用(阿里云、淘宝使用代码分析)
2016/10/11 Javascript
jQuery实现div跟随鼠标移动
2020/08/20 jQuery
JS实现点击链接切换显示隐藏内容的方法
2017/10/19 Javascript
JavaScript canvas基于数组生成柱状图代码实例
2020/03/06 Javascript
关于angular浏览器兼容性问题的解决方案
2020/07/26 Javascript
[04:28]DOTA2亚洲邀请赛小组赛第五日 TOP10精彩集锦
2015/02/03 DOTA
如何准确判断请求是搜索引擎爬虫(蜘蛛)发出的请求
2015/10/13 Python
Python正则表达式匹配中文用法示例
2017/01/17 Python
Python实现的字典值比较功能示例
2018/01/08 Python
python Spyder界面无法打开的解决方法
2018/04/27 Python
pycharm设置注释颜色的方法
2018/05/23 Python
远程部署工具Fabric详解(支持Python3)
2019/07/04 Python
对Django中static(静态)文件详解以及{% static %}标签的使用方法
2019/07/28 Python
python tkinter实现彩球碰撞屏保
2019/07/30 Python
pycharm双击无响应(打不开问题解决办法)
2020/01/10 Python
jupyter notebook 多环境conda kernel配置方式
2020/04/10 Python
python中的unittest框架实例详解
2021/02/05 Python
python matplotlib工具栏源码探析二之添加、删除内置工具项的案例
2021/02/25 Python
pycharm配置安装autopep8自动规范代码的实现
2021/03/02 Python
Lookfantastic美国/加拿大:英国知名美妆购物网站
2019/03/27 全球购物
如何写一份好的自荐信
2014/01/02 职场文书
关于毕业的广播稿
2014/01/10 职场文书
简历的自我评价
2014/02/03 职场文书
社区党建工作方案
2014/06/10 职场文书
小学生光盘行动倡议书
2015/04/28 职场文书