首页 > 编程知识 正文

微信小程序弹出窗口,微信小程序点击弹窗

时间:2023-05-05 11:21:33 阅读:268831 作者:3439

微信小程序里面的提示框实现,先来张示例图:

先在.wxml里面写好布局文件,这里拿删除按钮作为示例:

<!-- 删除按钮 --> <view class="buttonView"> <text class="delete_button" bindtap="delete" data-index="{{index}}">删除</text> </view>

 这里解释一下,点击事件用bindtap,delete是需要在.js文件里写的点击事件方法。bindtap="delete"是布局文件中删除按钮与.js文件里的删除方法绑定。下面看下.js里面删除方法,弹窗是在点击删除的时候弹出的,所以写在删除事件里面了:

// 删除按钮点击事件 delete:function(e){ // 提示框 wx.showModal({ title: '提示', content: '确定删除?', success: function (res) { if (res.confirm) { console.log('确定') } else { console.log('取消') } } }) },

下面对提示框用到的各属性做下解释:

title:提示标题;

content:提示内容;

showCancel:是否显示取消按钮;

cancelText:取消按钮的文字,最多 4 个字符;

cancelColor:取消按钮的文字颜色,必须是 16 进制格式的颜色字符串;

confirmText:确认按钮的文字,最多 4 个字符;

confirmColor:确认按钮的文字颜色,必须是 16 进制格式的颜色字符串;

success:调用成功的回调函数;

res.confirm: 为 true 时,表示用户点击了确定按钮;

res.cancel:为 true 时,表示用户点击了取消(用于 Android 系统区分点击蒙层关闭还是点击取消按钮关闭);

 

布局文件中的data-index="{{index}}",是获取列表当前行用的,在下一篇文章再讲。

微信官方文档地址:https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showModal.html

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。