小程序弹窗

最新推荐文章于 2024-09-15 07:15:20 发布

无忧道长

最新推荐文章于 2024-09-15 07:15:20 发布

阅读量237

点赞数

分类专栏：小程序文章标签：小程序 javascript

本文链接：https://blog.csdn.net/GSLA6/article/details/107970210

版权

1 篇文章 0 订阅

订阅专栏

项目目录下新建component文件夹（可自定义），在该目录下新建dialog目录（可自定义），用于区分多个自定义组件
在dialog目录下右键，选择新建component，输入diaolog，自动生成组件文件
编写组件的wxml文件，弹窗界面可根据需求编写。
<slot name="dialog-body"></slot>这是组件模板，可将弹窗内容动态的插入到弹窗里，在需要引用的地方使用<view slot="dialog-body">{{dialogContent}}</view>引用即可
编写组件的js文件，如使用了组件模板，需添加options:{ multipleSlots: true },设置组件的属性和方法。通常设置标题和显隐的属性、点击确认回调的方法。如:定义title属性，
```
properties: {
   title:{
     type:String,
     value:''
   },
} 
引用时
<view title="这是标题"></view>
```
引入自定义控件。在需要引入的位置，配置JSON文件，
```
"usingComponents": {       
    "listdialog": "../../component/listdialog/listdialog",
    "dialog":"../../component/dialog/dialog"
}
```
控件名和此处定义的名称（listdialog、dialog）须一致。

模态窗

<modal hidden="{{!dialog3}}" title="等级制度" confirm-text="我知道了" bindconfirm="confirm" no-cancel="{{true}}">
	此处可根据业务设计单选、复选、列表、滚动
</modal>

提示窗

wx.showToast({
   title: this.data.dialogContent,
   icon:'success'
   duration:1500
 })

对比
1 .showToast仅用来提示或作为数据加载缓冲效果，没有其他过多操作。
2 .模态窗相对来说能实现大部分的弹窗需求，但确定按钮不可隐藏
3 .自定义组件可根据需求进行自定义开发
自定义组件注意事项

1.使用必须添加 options
2.引用的控件名称必须和在json中定义的名称一致
3.自定义控件要放在其他布局之上，否则会被其他布局遮盖