WeUI for 小程序actionsheet弹出式菜单

2018年10月15日 11:30 | 54次浏览 作者原创 版权保护

一、引入小程序weui css样式库,请参考第一章


二、在pages目录中新建目录actionsheet以及文件actionsheet.wxml,并添加如下代码

<view class="page">
<view class="page__hd">
<view class="page__title">ActionSheet</view>
<view class="page__desc">弹出式菜单,采用小程序原生的actionsheet</view>
</view>
<view class="page__bd">
<view class="weui-btn-area">
<button type="default" bindtap="open">ActionSheet</button>
</view>
</view>
</view><!--V型知识库原创 www.vxzsk.com-->


三、在根目录app.json配置文件中配置actionsheet文件路径,保存后会自动生成对应的js、css等文件

"pages/actionsheet/actionsheet",


四、actionsheet.wxss样式代码

/* pages/actionsheet/actionsheet.wxss */
page{
background-color: #FFFFFF;
}


五、actionsheet.js代码实现

open: function () {
wx.showActionSheet({
itemList: ['A', 'B', 'C','E'],
success: function (res) {
if (!res.cancel) {
console.log(res.tapIndex)
}
}
});
}

上述第三行代码是初始化弹出式菜单的菜单名称


六、效果


此文章本站原创,地址 https://www.vxzsk.com/1909.html   转载请注明出处!谢谢!

感觉本站内容不错,读后有收获?小额赞助,鼓励网站分享出更好的教程