小程序模板网

微信小程序wx.showToast(),action-sheet 反馈上拉菜单,js动态给前台元素绑定事件

2018-02-06 东坡竹

一:wx.showToast()

 

  1. var pageObject = {
  2. onLoad: function () {
  3. wx.showToast({
  4. title: '成功', //标题
  5. icon: 'loading', //图标,支持"success"、"loading"
  6. image: '../image/img.png', //自定义图标的本地路径,image 的优先级高于 icon
  7. duration: 2000000, //提示的延迟时间,单位毫秒,默认:1500
  8. mask: false, //是否显示透明蒙层,防止触摸穿透,默认:false
  9. success: function () { }, //接口调用成功的回调函数
  10. fail: function () { }, //接口调用失败的回调函数
  11. complete: function () { } //接口调用结束的回调函数
  12. })
  13. }
  14. }
  15.  
  16. Page(pageObject)
 

二:action-sheet 反馈上拉菜单

//js

 

  1. var items = ['item1', 'item2', 'item3', 'item4']
  2. var pageObject = {
  3. data: {
  4. actionSheetHidden: true,
  5. actionSheetItems: items
  6. },
  7. actionSheetTap: function (e) {
  8. this.setData({
  9. actionSheetHidden: !this.data.actionSheetHidden
  10. })
  11. },
  12. actionSheetChange: function (e) {
  13. this.setData({
  14. actionSheetHidden: !this.data.actionSheetHidden
  15. })
  16. }
  17. }
  18.  
  19. for (var i = 0; i < items.length; ++i) {
  20. (function (itemName) {
  21. pageObject['bind' + itemName] = function (e) {
  22. console.log('click' + itemName, e)
  23. }
  24. })(items[i])
  25. }
  26.  
  27. Page(pageObject)

//wxml

 

  1. <button type="default" bindtap="actionSheetTap">弹出action sheet</button>
  2. <action-sheet hidden="{{actionSheetHidden}}" bindchange="actionSheetChange">
  3. <block wx:for-items="{{actionSheetItems}}">
  4. <action-sheet-item class="item" bindtap="bind{{item}}">{{item}}</action-sheet-item>
  5. </block>
  6. <action-sheet-cancel class="cancel">取消</action-sheet-cancel>
  7. </action-sheet>
 

三:js动态给前台元素绑定事件

//js动态给前台绑定事件

 

  1. var myList = ["items1","items2","items3"]
  2.  
  3.  
  4. pageObject = {
  5. data:{
  6. actionSheetItems:myList
  7. }
  8. }
  9.  
  10.  
  11. for(var i = 0;i < myList.length;++i){
  12. (function(itemName){
  13. pageObject[itemName] = function(e){
  14. //pageObject['<span><span class="string">bind</span></span>'+itemName] 事件名称
  15. //function(){}事件主体
  16. }
  17. })(myList[i])
  18. }
  19.  
  20. Page(pageObject)

//wxml

 

  1. <block>
  2. <action-sheet hidden="false">
  3. <block wx:for-items="{{actionSheetItems}}">
  4. <action-sheet-item bindtap="{{item}}">{{item}}</action-sheet-item>
  5. </block>
  6. <action-sheet-cancel class="cancel">取消</action-sheet-cancel>
  7. </action-sheet>
  8. </block>


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/21621.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询