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

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