微信小程序 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 对象的创建与使用
Mar 09 Javascript
Javascript打印网页部分内容的脚本
Nov 17 Javascript
60行js代码实现俄罗斯方块
Mar 31 Javascript
javascript实现全局匹配并替换的方法
Apr 27 Javascript
jquery获取url参数及url加参数的方法
Oct 26 Javascript
自己动手写的jquery分页控件(非常简单实用)
Oct 28 Javascript
jQuery动态添加及删除表单上传元素的方法(附demo源码下载)
Jan 15 Javascript
JavaScript 浏览器兼容性总结及常用浏览器兼容性分析
Mar 30 Javascript
JS实现图片上传预览功能
Nov 21 Javascript
BootStrap 弹出层代码
Feb 09 Javascript
Vue resource三种请求格式和万能测试地址
Sep 26 Javascript
如何区分vue中的v-show 与 v-if
Sep 08 Javascript
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
php中如何同时使用session和cookie来保存用户登录信息
2013/07/05 PHP
Yii2实现增删改查后留在当前页的方法详解
2017/01/13 PHP
php高清晰度无损图片压缩功能的实现代码
2018/12/09 PHP
数理公式,也可以这么唯美
2021/03/10 无线电
jQuery EasyUI API 中文文档 - NumberSpinner数值微调器使用介绍
2011/10/21 Javascript
用Javascript评估用户输入密码的强度(Knockout版)
2011/11/30 Javascript
JQuery实现用户名无刷新验证的小例子
2013/03/22 Javascript
JavaScript中的类数组对象介绍
2014/12/30 Javascript
跟我学习javascript解决异步编程异常方案
2015/11/23 Javascript
MVC+jQuery.Ajax异步实现增删改查和分页
2020/12/22 Javascript
js 弹出对话框(遮罩)透明,可拖动的简单实例
2016/07/11 Javascript
JS中script标签defer和async属性的区别详解
2016/08/12 Javascript
Bootstrap Multiselect 常用组件实现代码
2017/07/09 Javascript
关于TypeScript中import JSON的正确姿势详解
2017/07/25 Javascript
微信小程序如何获取用户头像和昵称
2019/09/23 Javascript
适用于 Vue 的播放器组件Vue-Video-Player操作
2020/11/16 Javascript
Odoo中如何生成唯一不重复的序列号详解
2018/02/10 Python
使用python编写监听端
2018/04/12 Python
Django学习教程之静态文件的调用详解
2018/05/08 Python
selenium在执行phantomjs的API并获取执行结果的方法
2018/12/17 Python
Python3.5 Pandas模块缺失值处理和层次索引实例详解
2019/04/23 Python
Python 窗体(tkinter)按钮 位置实例
2019/06/13 Python
在python中创建指定大小的多维数组方式
2019/11/28 Python
python seaborn heatmap可视化相关性矩阵实例
2020/06/03 Python
python用Tkinter做自己的中文代码编辑器
2020/09/07 Python
python中random.randint和random.randrange的区别详解
2020/09/20 Python
详解如何修改jupyter notebook的默认目录和默认浏览器
2021/01/24 Python
Ralph Lauren英国官方网站:Ralph Lauren UK
2018/04/03 全球购物
Jimmy Choo美国官网:周仰杰鞋子品牌
2018/06/08 全球购物
GAZMAN官网:澳大利亚领先的男装品牌
2019/12/19 全球购物
校园网站的创业计划书范文
2013/12/30 职场文书
农民致富事迹材料
2014/01/23 职场文书
优秀毕业生自荐信
2014/06/10 职场文书
2015年社区纪检工作总结
2015/04/21 职场文书
2016年“9.22”世界无车日活动小结
2016/04/05 职场文书
十大最强岩石系宝可梦,怪颚龙实力最强,第七破坏力很强
2022/03/18 日漫