原生微信小程序自定义弹框组件
微信小程序自定义弹框组件 由于微信小程序自带的toast及model都有很大的限制,很多产品对弹框的要求是多样化的,于是自己动手封装实现一组弹框功能。该组件只是提供一种实现方式,对样式不满意可自行修改。
实现效果图
- toast
文章图片
- model
-
文章图片
- loading
文章图片
如何使用
1、在需要使用的页面引入wxss
@import '../component/wx-layer/wx-layer.wxss';
【原生微信小程序自定义弹框组件】2、wxml引入模块
3、js引入
import WxLayer from '../component/wx-layer/wx-layer';
Page({
onLoad() { //onload中初始化组件
new WxLayer();
}
})
使用
1、toast: this.showToast(title, duration, mask);
参数 | 类型 | 默认 | 是否必须 | 说明 |
---|---|---|---|---|
title | string | yes | 内容 | |
duration | number | 2000 | no | 持续时间 |
mask | boolean | false | no | 是否使用遮罩层 |
参数 | 类型 | 默认 | 是否必须 | 说明 |
---|---|---|---|---|
title | string | no | 标题 | |
content | string | yes | 提示内容 | |
confirmText | string | 确认 | no | 确认按钮文案 |
cancelText | string | no | 取消按钮文案 | |
confirm | function | no | 点击确认回调 | |
showCancel | boolean | false | no | 是否显示取消按钮 |
mask | boolean | false | no | 是否使用遮罩层 |
参数 | 类型 | 默认 | 是否必须 | 说明 |
---|---|---|---|---|
text | string | no | loading文案 | |
mask | boolean | false | no | 是否使用遮罩层 |
如果我的代码对你有帮助,请给个start吧! ^^
推荐阅读
- 一个小故事,我的思考。
- 家乡的那条小河
- 一个人的碎碎念
- 野营记-第五章|野营记-第五章 讨伐梦魇兽
- 昨夜小楼听风
- 2021-02-17|2021-02-17 小儿按摩膻中穴-舒缓咳嗽
- 基于微信小程序带后端ssm接口小区物业管理平台设计
- 2019.4.18感恩日记
- 那件我们忽略的小事叫感恩
- 你有婚内虐待行为吗()