微信小程序 action-sheet 反馈上拉菜单简单实例


Posted in Javascript onMay 11, 2017

微信小程序 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.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)

wxml

<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>

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

Javascript 相关文章推荐
JavaScript中的单引号和双引号报错的解决方法
Sep 01 Javascript
基于Bootstrap里面的Button dropdown打造自定义select
May 30 Javascript
DOM操作和jQuery实现选项移动操作的简单实例
Jun 07 Javascript
用js读写cookie的简单方法(推荐)
Aug 08 Javascript
javascript 中iframe高度自适应(同域)实例详解
May 16 Javascript
Vue.js devtool插件安装后无法使用的解决办法
Nov 27 Javascript
JavaScrip关于创建常量的知识点
Dec 07 Javascript
vue-router 路由传参用法实例分析
Mar 06 Javascript
浅谈vue的第一个commit分析
Jun 08 Javascript
JS倒计时两种实现方式代码实例
Jul 27 Javascript
浅谈Ant Design Pro 菜单自定义 icon
Nov 17 Javascript
vue使用localStorage持久性存储实现评论列表
Apr 14 Vue.js
jQuery遮罩层实例讲解
May 11 #jQuery
在JS中如何把毫秒转换成规定的日期时间格式实例
May 11 #Javascript
深入浅析AngularJS中的一次性数据绑定 (bindonce)
May 11 #Javascript
BootStrap 获得轮播中的索引和当前活动的焦点对象
May 11 #Javascript
微信小程序 navbar实例详解
May 11 #Javascript
微信小程序 图片宽高自适应详解
May 11 #Javascript
bootstrap fileinput组件整合Springmvc上传图片到本地磁盘
May 11 #Javascript
You might like
日本收入最高的漫画家:海贼王作者版税年收入高达8.45亿元
2020/03/04 日漫
PHP中HTML标签过滤技巧
2014/01/07 PHP
php常见的魔术方法详解
2014/12/25 PHP
PHP实现加密文本文件并限制特定页面的存取的效果
2016/10/21 PHP
使用PHP+MySql实现微信投票功能实例代码
2017/09/29 PHP
读jQuery之五(取DOM元素)
2011/06/20 Javascript
一个分享按钮的插件使用介绍(可扩展,内附开发制作流程)
2011/09/19 Javascript
Jquery 选中表格一列并对表格排序实现原理
2012/12/15 Javascript
JS获得URL超链接的参数值实例代码
2013/06/21 Javascript
JS操作Cookie写入和读取实例代码
2013/10/20 Javascript
jQuery学习笔记之jQuery中的$
2015/01/19 Javascript
JavaScript简单遍历DOM对象所有属性的实现方法
2015/10/21 Javascript
vue指令以及dom操作详解
2017/03/04 Javascript
基于JavaScript实现的顺序查找算法示例
2017/04/14 Javascript
Vue.JS实现垂直方向展开、收缩不定高度模块的JS组件
2018/06/19 Javascript
使用Sonarqube扫描Javascript代码的示例
2018/12/26 Javascript
js+h5 canvas实现图片验证码
2020/10/11 Javascript
python使用分治法实现求解最大值的方法
2015/05/12 Python
Python入门_学会创建并调用函数的方法
2017/05/16 Python
Python基于回溯法子集树模板解决全排列问题示例
2017/09/07 Python
python九九乘法表的实例
2017/09/26 Python
将TensorFlow的模型网络导出为单个文件的方法
2018/04/23 Python
Python常见数据类型转换操作示例
2019/05/08 Python
python时间time模块处理大全
2020/10/25 Python
Python tkinter实现日期选择器
2021/02/22 Python
html5中valid、invalid、required的定义
2014/02/21 HTML / CSS
乌克兰在线电子产品商店:MTA
2019/11/14 全球购物
Tuckernuck官网:经典的美国品质服装、鞋子和配饰
2021/01/11 全球购物
什么是静态路由?什么是动态路由?各自的特点是什么?
2015/09/16 面试题
党员评议思想汇报
2014/10/08 职场文书
2015财务年终工作总结范文
2015/05/22 职场文书
送给自己的励志语句:要安静的优秀,悄无声息的坚强
2019/11/26 职场文书
mysql5.7的安装及Navicate长久免费使用的实现过程
2021/11/17 MySQL
美元符号 $
2022/02/17 杂记
Python语言中的数据类型-序列
2022/02/24 Python
Win10服务全部禁用了怎么启动?Win10服务全部禁用解决方法
2022/09/23 数码科技