小程序弹窗

小程序弹窗

  • 自定义弹窗
  1. 项目目录下新建component文件夹(可自定义),在该目录下新建dialog目录(可自定义),用于区分多个自定义组件
  2. 在dialog目录下右键,选择新建component,输入diaolog,自动生成组件文件
  3. 编写组件的wxml文件,弹窗界面可根据需求编写。
    <slot name="dialog-body"></slot>这是组件模板,可将弹窗内容动态的插入到弹窗里,在需要引用的地方使用<view slot="dialog-body">{{dialogContent}}</view>引用即可
  4. 编写组件的js文件,如使用了组件模板,需添加options:{ multipleSlots: true },设置组件的属性和方法。通常设置标题和显隐的属性、点击确认回调的方法。如:定义title属性,
    properties: {
       title:{
         type:String,
         value:''
       },
    } 
    引用时
    <view title="这是标题"></view>
    
  5. 引入自定义控件。在需要引入的位置,配置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.自定义控件要放在其他布局之上,否则会被其他布局遮盖

弹窗Demo地址

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值