热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

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

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

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

index.wxml

弹出action sheet

{{item.txt}}

取消

提示:您选择了菜单{{menu}}

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

})

}

})

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

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


推荐阅读
  • 微信小程序开发指南:创建动态电影选座界面
    本文详细介绍如何在微信小程序中实现一个动态且可视化的电影选座组件,提高用户体验。通过合理的布局和交互设计,使用户能够轻松选择心仪的座位。 ... [详细]
  • 本文详细介绍如何在SSM(Spring + Spring MVC + MyBatis)框架中实现分页功能。包括分页的基本概念、数据准备、前端分页栏的设计与实现、后端分页逻辑的编写以及最终的测试步骤。 ... [详细]
  • Android 中的布局方式之线性布局
    nsitionalENhttp:www.w3.orgTRxhtml1DTDxhtml1-transitional.dtd ... [详细]
  • 本文探讨了如何在PHP与MySQL环境中实现高效的分页查询,包括基本的分页实现、性能优化技巧以及高级的分页策略。 ... [详细]
  • 本文探讨了如何通过优化 DOM 操作来提升 JavaScript 的性能,包括使用 `createElement` 函数、动画元素、理解重绘事件及处理鼠标滚动事件等关键主题。 ... [详细]
  • 本文探讨了如何通过Service Locator模式来简化和优化在B/S架构中的服务命名访问,特别是对于需要频繁访问的服务,如JNDI和XMLNS。该模式通过缓存机制减少了重复查找的成本,并提供了对多种服务的统一访问接口。 ... [详细]
  • 深入理解:AJAX学习指南
    本文详细探讨了AJAX的基本概念、工作原理及其在现代Web开发中的应用,旨在为初学者提供全面的学习资料。 ... [详细]
  • HTML:  将文件拖拽到此区域 ... [详细]
  • 本文档详细介绍了软通动力Java开发工程师职位的笔试题目,涵盖了Java基础、集合框架、JDBC、JSP等内容,并提供了详细的答案解析。 ... [详细]
  • 本文详细探讨了在Web开发中常见的UTF-8编码问题及其解决方案,包括HTML页面、PHP脚本、MySQL数据库以及JavaScript和Flash应用中的乱码问题。 ... [详细]
  • Asynchronous JavaScript and XML (AJAX) 的流行很大程度上得益于 Google 在其产品如 Google Suggest 和 Google Maps 中的应用。本文将深入探讨 AJAX 在 .NET 环境下的工作原理及其实现方法。 ... [详细]
  • 一、Advice执行顺序二、Advice在同一个Aspect中三、Advice在不同的Aspect中一、Advice执行顺序如果多个Advice和同一个JointPoint连接& ... [详细]
  • flea,frame,db,使用,之 ... [详细]
  • 本文详细介绍了如何在Android L版本中应用Material Design的主题和布局,包括Material主题的应用方法、自定义主题和颜色方案、状态栏和导航条的自定义,以及Material Design布局的特点和兼容性处理。 ... [详细]
  • 本文介绍了一个使用Spring框架和Quartz调度器实现每周定时调用Web服务获取数据的小项目。通过详细配置Spring XML文件,展示了如何设置定时任务以及解决可能遇到的自动注入问题。 ... [详细]
author-avatar
金牛梁浩_934
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有