小程序_ACTIONSHEET 底部上划弹出的几种设置方法

小程序内置 ActionSheet 组件

wx.showActionSheet({ 
    itemList: ['A', 'B', 'C'],           // 弹窗列表
    success: function (res) {            // 确认后的操作
        console.log(res.tapIndex) 
    },fail: function (res) {             // 取消后的操作
        console.log(res.errMsg) 
    } 
})

自定义 ActionSheet

// .wxml
<button type="default" bindtap="actionSheetTap">弹出action sheet</button>
<action-sheet hidden="{{actionSheetHidden}}" bindchange="actionSheetChange">
    <block wx:for-items="{{actionSheetItems}}">
        <action-sheet-item  bindtap="bind{{item}}">{{item}}</action-sheet-item>
    </block>
    <action-sheet-cancel >取消</action-sheet-cancel>
</action-sheet>

// .js
var items = ['item1', 'item2', 'item3', 'item4']
var pageObject = {
    data: {
        actionSheetHidden: true,
        actionSheetItems: items
    },
    actionSheetTap: function (e) {
        console.log(this);
        this.setData({
            actionSheetHidden: !this.data.actionSheetHidden
        })
    },
    actionSheetChange: function (e) {               //点击ation-sheet-cancel，会触发action-sheet绑定的事件。在这里可以通过改变hidden控制菜单的隐藏
        this.setData({
            actionSheetHidden: !this.data.actionSheetHidden
        });
        console.log("隐藏");
    }
}

for (var i = 0; i < items.length; ++i) {
    (function (itemName) {
        pageObject['bind' + itemName] = function (e) {
        console.log('click' + itemName, e)
        }
    })(items[i])
}

Page(pageObject)