微信小程序中action-sheet有什么用

发布时间:2021-03-10 15:55:02 作者:小新
来源:亿速云 阅读:230

这篇文章主要介绍微信小程序中action-sheet有什么用,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

微信小程序  action-sheet

属性名类型默认值说明
hiddenBooleantrue是否隐藏
bindchangeEventHandle
点击背景或action-sheet-cancel按钮时触发change事件,不携带数据

action-sheet-item

底部菜单表的子选项。

action-sheet-cancel

底部菜单表的取消按钮,和action-sheet-item的区别是,点击它会触发action-sheet的change事件,并且外观上会同它上面的内容间隔开来。

示例代码:

<button type="default" bindtap="actionSheetTap">弹出action sheet</button>
<action-sheet hidden="{{actionSheetHidden}}" bindchange="actionSheetChange">
 <block wx:for-items="{{actionSheetItems}}">
 <action-sheet-item class="item" bindtap="bind{{item}}">{{item}}</action-sheet-item>
 </block>
 <action-sheet-cancel class="cancel">取消</action-sheet-cancel>
</action-sheet>
var items = ['item1', 'item2', 'item3', 'item4']
var pageObject = {
 data: {
 actionSheetHidden: true,
 actionSheetItems: items
 },
 actionSheetTap: function(e) {
 this.setData({
 actionSheetHidden: !this.data.actionSheetHidden
 })
 },
 actionSheetChange: function(e) {
 this.setData({
 actionSheetHidden: !this.data.actionSheetHidden
 })
 }
}

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

Page(pageObject)
action-sheet

微信小程序中action-sheet有什么用

以上是“微信小程序中action-sheet有什么用”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注亿速云行业资讯频道!

推荐阅读:
  1. 微信小程序中组件marquee有什么用
  2. 微信小程序中navbar有什么用

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

小程序 action-sheet

上一篇:怎么调用Oracle存储过程

下一篇:关于Rocky Linux的相关介绍

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》