微信小程序案例需求文档-小程序自定义actionSheet组件-微信小程序案例-即速应用

微信小程序案例需求文档-小程序自定义actionSheet组件-微信小程序案例

浏览量：1915 时间：2020-03-20 来源：chenmei8988

1.在微信小程序中，针对操作菜单的需求，官方文档提供了相应的api，如下图所示。
2.
3.但是小程序自带的操作菜单没有“标题”这么一个参数，不能在操作菜单的顶部显示自定义的标题，因为这么一个需求，笔者自己撸了一个actionSheet组件，效果如下。
4.
5.接下来是源码展示。
6.首先是wxml的代码。
!--component/lzy-actionsheet/lzy-actionsheet.wxml--viewclass="container"wx:if='{{isOpened}}'viewclass='rowbg-red'{{title}}/viewviewclass='row'wx:for='{{list}}'wx:keydata-idx='{{index}}'bindtap='handClick'{{item}}/viewviewclass='rowtext-graymargin-top'bindtap='cancel'取消/view/viewviewclass='mask'wx:if='{{isOpened}}'bindtap='cancel'/view
7.然后是js源码
//component/lzy-actionsheet/lzy-actionsheet.jsComponent({/***组件的属性列表*/properties:{isOpened:Boolean,list:Array,title:String},/***组件的初始数据*/data:{list:['操作1','操作2']},/***组件的方法列表*/methods:{cancel(){this.setData({isOpened:false})wx.showTabBar()},handClick(e){this.triggerEvent('select',e.currentTarget.dataset.idx);},}})
8.最后是wxss的代码
/*component/lzy-actionsheet/lzy-actionsheet.wxss*/.mask{background:#000;opacity:0.5;position:fixed;top:0;right:0;bottom:0;left:0;z-index:600}.row{width:100%;text-align:center;line-height:50px;background:#fff;border-bottom:1pxsolid#f0f0f0;}.text-gray{color:gray}.bg-red{color:#fff;background-color:#e54d42;}.margin-top{margin-top:10px}.container{background:#f0f0f0;position:fixed;width:100vw;bottom:0;z-index:888;font-size:30rpx;}
9.页面的调用
actionsheetisOpened='{{isOpened}}'list='{{sheetList}}'title='{{title}}'bindselect='selectAction'/actionsheet
10.其中，bindselect事件在用户点击操作项目后触发，e.detail返回操作数组的索引值。