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

 更新时间:2017年05月11日 17:04:57   作者:xiaochun365  
这篇文章主要介绍了微信小程序 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 实现点击关闭全屏示例详解

    这篇文章主要为大家介绍了JavaScript 实现点击关闭全屏示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • 微信小程序 特效菜单抽屉效果实例代码

    微信小程序 特效菜单抽屉效果实例代码

    这篇文章主要介绍了微信小程序 特效菜单抽屉效果实例代码的相关资料,抽屉效果的菜单在APP应用中经常使用,这里用微信小程序来实现这一效果,需要的朋友可以参考下
    2017-01-01
  • 实现一个简单得数据响应系统

    实现一个简单得数据响应系统

    这篇文章主要介绍了实现一个简单得数据响应系统,文章介绍的数据响应系统会用到Dep,其实,这就是一个依赖收集的容器, depend 收集依赖, notify 触发依赖,下面来看看详细的内容结介绍,需要的朋友可以参考一下
    2021-11-11
  • Uncaught EvalError:Refused to evaluate a string as JavaScript解决

    Uncaught EvalError:Refused to evaluate a

    这篇文章主要为大家介绍了Uncaught EvalError:Refused to evaluate a string as JavaScript解决分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-09-09
  • js中ES6继承和ES5继承之间的差别

    js中ES6继承和ES5继承之间的差别

    这篇文章主要介绍了ES6继承和ES5继承,以及两个继承之间的差别,文中运用示例以及代码讲解的非常清晰,感兴趣的小伙伴可以参考一下
    2021-08-08
  • 一篇文章教你学会js实现弹幕效果

    一篇文章教你学会js实现弹幕效果

    弹幕效果随着b站的越做越强,出现了越来越多的仿照b站的视频站点。然而这些视频站仿照的最多的只有一点!那就是弹幕,现在也越来越多的人喜欢上了弹幕本文就教你如何制作
    2021-08-08
  • 微信小程序 wxapp内容组件 icon详细介绍

    微信小程序 wxapp内容组件 icon详细介绍

    这篇文章主要介绍了微信小程序 wxapp内容组件 icon详细介绍的相关资料,并附简单实例,需要的朋友可以参考下
    2016-10-10
  • 微信小程序 网络API 上传、下载详解

    微信小程序 网络API 上传、下载详解

    这篇文章主要介绍了微信小程序 网络API 上传、下载详解的相关资料,需要的朋友可以参考下
    2016-11-11
  • 微信小程序日历组件calendar详解及实例

    微信小程序日历组件calendar详解及实例

    这篇文章主要介绍了微信小程序日历组件calendar详解及实例的相关资料,需要的朋友可以参考下
    2017-06-06
  • ant-design的upload组件中实现粘贴上传实例详解

    ant-design的upload组件中实现粘贴上传实例详解

    这篇文章主要为大家介绍了ant-design的upload组件中实现粘贴上传实例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-05-05

最新评论