小程序自定义组件showToast
2019-01-18 11:18
483 查看
版权声明:署名-非商业性使用 转载请保留原文链接及作者。 https://blog.csdn.net/qq_40413396/article/details/86536817
1、创建组件
** wxml wxss js json **
- 在js中 *
// Component/showToast/showToast.js const app = getApp(); const { requestData } = require('../../utils/util'); Component({ //外部数据 从父组件传值 /** * 组件的属性列表 */ properties: { isMask:{ // 最底层半透黑色遮罩显隐状态 type:Boolean, value:false }, isnoIs:{ // 不能给自己投票 type: Boolean, value: false }, isShut: { // 是否确认投票 type: Boolean, value: false }, isjorn: { // 参与过了 type: Boolean, value: false }, tpNameSplit: { type: String, value: "" }, name: { // 被投票人姓名 type: String, value: "" } }, /** * 组件的初始数据 */ data: { //内部数据 初始化渲染 }, /** * 组件的方法列表 */ methods: { hideToast:function(){ //关闭所有弹窗 清除数据 this.setData({ isMask: false, isnoIs: false, isShut: false, isjorn: false, tpNameSplit: '', name: '' }) } })
2、引入组件
{ "usingComponents": { "showToast": "../../Component/showToast/showToast" //引入组件 }, "enablePullDownRefresh": true }
3、父组件向子组件传参
** 在index.wxml中: **
<showToast id='showToast' isMask = '{{componentShowToast.isMask}}' isnoIs='{{componentShowToast.isnoIs}}' isShut='{{componentShowToast.isShut}}' isjorn='{{componentShowToast.isjorn}}' name='{{componentShowToast.name}}' tpNameSplit='{{componentShowToast.tpNameSplit}}'></showToast>
在index.js中:
data{ componentShowToast: { isMask: false, isnoIs: false, isShut: false, isjorn: false, tpNameSplit: '', name:'' } }
** 显而易见 我们通过子组件的properties进行通信了 (见标题1) **
相关文章推荐
- 自定义Toast组件
- 微信小程序自定义prompt组件步骤详解
- 微信小程序:自定义组件
- 微信小程序自定义组件Dialog
- 微信小程序之自定义Toast
- 微信小程序wx.showToast不显示
- 关于小程序自定义组件
- [微信小程序]实现一个自定义遮罩层组件(完整示例代码附效果图)
- 快速掌握小程序组件事件自定义参数的方法
- 如何在小程序自定义组件和动态传入数据小demo
- flex ViewStack 主程序与自定义组件传参
- 微信小程序之『自定义toast』
- 微信小程序之自定义select下拉选项框组件
- 手摸手教你微信小程序开发之自定义组件
- (delphi)程序运行过程中等待对话框的自定义组件源码(包含两个提示,进度条,AVI)
- 微信小程序 toast组件详细介绍
- 萌新爬坑系列-百度小程序自定义组件
- 小程序自定义组件基础
- 微信小程序自定义组件示例
- 使用微信小程序自定义组件实现的tabs选项卡功能