微信小程序实现的点击按钮 弹出底部上拉菜单功能示例


Posted in Javascript onDecember 20, 2018

本文实例讲述了微信小程序实现的点击按钮 弹出底部上拉菜单功能。分享给大家供大家参考,具体如下:

index.wxml

<button type="default" bindtap="actionSheetTap">弹出action sheet</button>
<action-sheet hidden="{{actionSheetHidden}}" bindchange="actionSheetbindchange">
  <block wx:for-items="{{actionSheetItems}}">
    <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
  })
 }
})

运行效果(调试环境问题,颜色出现了偏差,效果凑合看~):

微信小程序实现的点击按钮 弹出底部上拉菜单功能示例

PS:关于微信小程序组件相关说明还可查看微信小程序组件说明表:http://tools.3water.com/table/wx_component

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

Javascript 相关文章推荐
3分钟写出来的Jquery版checkbox全选反选功能
Oct 23 Javascript
javaScript 计算两个日期的天数相差(示例代码)
Dec 27 Javascript
iframe实用操作锦集
Apr 22 Javascript
JavaScript数据结构链表知识详解
Nov 21 Javascript
jQuery图片轮播功能实例代码
Jan 29 Javascript
jQuery实现大图轮播
Feb 13 Javascript
Angular.Js之Scope作用域的学习教程
Apr 27 Javascript
微信小程序 转发功能的实现
Aug 04 Javascript
bootstrap里bootstrap动态加载下拉框的实例讲解
Aug 10 Javascript
vue-cli随机生成port源码的方法
Sep 02 Javascript
antd table按表格里的日期去排序操作
Nov 17 Javascript
JS操作JSON常用方法(10w阅读)
Dec 06 Javascript
vue+Vue Router多级侧导航切换路由(页面)的实现代码
Dec 20 #Javascript
微信小程序module.exports模块化操作实例浅析
Dec 20 #Javascript
JavaScript类的继承操作实例总结
Dec 20 #Javascript
vue返回上一页面时回到原先滚动的位置的方法
Dec 20 #Javascript
详解Vue.js自定义tipOnce指令用法实例
Dec 19 #Javascript
JavaScript创建对象方式总结【工厂模式、构造函数模式、原型模式等】
Dec 19 #Javascript
JavaScript链式调用实例浅析
Dec 19 #Javascript
You might like
PHP传值到不同页面的三种常见方式及php和html之间传值问题
2015/11/19 PHP
jQuery 使用个人心得
2009/02/26 Javascript
基于Jquery的标签智能验证实现代码
2010/12/27 Javascript
dreamweaver 安装Jquery智能提示
2011/04/02 Javascript
js弹出框轻量级插件jquery.boxy使用介绍
2013/01/15 Javascript
js 获取元素下面所有li的两种方法
2014/04/14 Javascript
JS实现简易图片轮播效果的方法
2015/03/25 Javascript
jquery tmpl模板(实例讲解)
2017/09/02 jQuery
原生js封装运动框架的示例讲解
2017/10/01 Javascript
JavaScript实现左侧菜单效果
2017/12/14 Javascript
AngularJS双向数据绑定原理之$watch、$apply和$digest的应用
2018/01/30 Javascript
vue2.0+ 从插件开发到npm发布的示例代码
2018/04/28 Javascript
详解Angular6.0使用路由步骤(共7步)
2018/06/29 Javascript
Angularjs之ngModel中的值验证绑定方法
2018/09/13 Javascript
关于vue的npm run dev和npm run build的区别介绍
2019/01/14 Javascript
layui使用数据表格实现购物车功能
2019/07/26 Javascript
微信小程序仿抖音视频之整屏上下切换功能的实现代码
2020/05/24 Javascript
Vue页面渲染中key的应用实例教程
2021/01/12 Vue.js
[02:28]DOTA2 2017国际邀请赛小组赛回顾
2017/08/09 DOTA
[49:35]KG vs SECRET 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
Python程序设计入门(2)变量类型简介
2014/06/16 Python
Python shutil模块用法实例分析
2019/10/02 Python
tensorflow 限制显存大小的实现
2020/02/03 Python
Python urllib.request对象案例解析
2020/05/11 Python
python将unicode和str互相转化的实现
2020/05/11 Python
python Xpath语法的使用
2020/11/26 Python
关于解决iframe标签嵌套问题的解决方法
2020/03/04 HTML / CSS
降消项目实施方案
2014/03/30 职场文书
优秀学生评语大全
2014/04/25 职场文书
投标服务承诺书
2014/05/28 职场文书
2014年公务员退休工资改革方案
2014/10/01 职场文书
小学语文复习计划
2015/01/19 职场文书
小学大队干部竞选稿
2015/11/20 职场文书
python编写五子棋游戏
2021/05/25 Python
TaiShan 200服务器安装Ubuntu 18.04的图文教程
2022/06/28 Servers
vue实现input输入模糊查询的三种方式
2022/08/14 Vue.js