首先在我们可以直接写到需要的 page 中,然后再进行抽取组件,自定义组件建议 wxzx-xxx 命名

官网地址:https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/

例如,我们封装的组件名为 **wxzx-loadmore

  • wxzx-loadmore.wxml
<view hidden="{{response.length < 1}}">
<view class="weui-loadmore" hidden="{{is_loadmore}}">
<view class="weui-loading"></view>
<view class="weui-loadmore__tips">正在加载</view>
</view>
<view class="weui-loadmore weui-loadmore_line" hidden="{{!is_loadmore}}">
<text class="weui-loadmore__tips">{{tip}}</text>
</view>
</view>

这里就是把index.wxml中的需要封装成组件的代码原样copy过来

  • wxzx-loadmore.js
Component({
/**
* 组件的属性列表
*/
properties: {
response: {
type: String,
value: ''
},
is_loadmore: {
type: Boolean,
value: false
},
tip: {
type: String,
value: '我是有底线的'
}
}, /**
* 组件的初始数据
*/
data: { }, /**
* 组件的方法列表
*/
methods: {
emit: function(data) {
// 自定义组件向父组件传值
let val = data,
my_event_detail = {
val: val
}
// myevent自定义名称事件,父组件中使用
this.triggerEvent('myevent', my_event_detail)
/*
在父组件中写上bind:myevent="get_emit",在父组件中就需要调用get_emit事件
*/
},
}
})
  • index.wxml 父组件
    <wxzx-loadmore
response="{{comment_list}}"
is_loadmore="{{is_loadmore}}"
bind:myevent="get_emit"
></wxzx-loadmore>
<!-- 这就是在父组件中调用子组件,然后基于子组件传值来在父组件中赋值 -->
  • index.js 中
// 接受子组件的传值
get_emit: function (e) {
this.setData({
is_show: e.detail.val
})
},
  • index.json 这里需要引入组件,在哪个父页面中引用子组件,就在哪个json文件中引入
{
"usingComponents": {
"wxzx-loadmore": "/component/wxzx-loadmore/wxzx-loadmore"
}
}

微信小程序自定义组件封装及父子间组件传值的更多相关文章

  1. 微信小程序 - 自定义swiper dots样式(非组件)

      自定义须知: :组件内无法使用自定义样式变化,需要自定义 :原理就是利用swiper change事件与下标index匹配,显示不同的样式 swiper组件须知: :一旦swiper用于组件化,就 ...

  2. 微信小程序 自定义导航组件 nav头部 全面屏设计

    nav-dynamic 微信小程序自定义nav头部组件:适配全面屏设计: 实现功能 初始进入页面时,展示初始状态下的nav样式: 页面滚动时,监听页面滚动事件,展示滚动状态下的nav样式: 根据配置字 ...

  3. 微信小程序自定义组件,提示组件

    微信小程序自定义组件,这里列举了一个常用的提示自定义组件,调用自定义组件中的方法和字段.仅供参考和学习. 编写组件: 在根目录下添加“components”目录,然后像添加Page页面一样添加自定义组 ...

  4. 微信小程序自定义弹窗wcPop插件|仿微信弹窗样式

    微信小程序自定义组件弹窗wcPop|小程序消息提示框|toast自定义模板弹窗 平时在开发小程序的时候,弹窗应用场景还是蛮广泛的,但是微信官方提供的弹窗比较有局限性,不能自定义修改.这个时候首先想到的 ...

  5. 微信小程序自定义Tabber,附详细源码

    目录 1,前言 2,说明 3,核心代码 1,前言 分享一个完整的微信小程序自定义Tabber,tabber按钮可以设置为跳转页面,也可以设置为功能按钮.懒得看文字的可以直接去底部,博主分享了小程序代码 ...

  6. 微信小程序——自定义导航栏

    微信头部导航栏可能通过json配置: 但是有时候我们项目需求可能需要自定义头部导航栏,如下图所示: 现在具体说一下实现步骤及方法: 步骤: 1.在 app.json 里面把 "navigat ...

  7. 微信小程序自定义 tabbar

    一定的需求情况下,无法使用小程序原生的 tabbar 的时候,需要自行实现一个和 tabbar 功能一模一样的自制组件. 查阅了海量的博客和文档之后,亲自踩坑.总结了三种在不使用微信小程序原生 tab ...

  8. 微信小程序把玩(二十七)audio组件

    原文:微信小程序把玩(二十七)audio组件 音频播放已经封装的很好!只需配合属性设置即可! (method和data配合使用) 主要属性: wxml <audio action="{ ...

  9. 微信小程序自定义tabbar的实现

    微信小程序自定义tabbar的实现 目的:当采用微信的自定义tabbar组件的时候,切换的时候会出现闪屏的效果:当使用微信默认的tabbar的时候,限制了tabbar的数量以及灵活配置. 方案:自己动 ...

随机推荐

  1. ASP.NET真假分页—真分页

    当数据量过大,有几万甚至十几万条数据时,每次都从数据库中取出所有数据就会降低查询效率,系统运行慢,还有可能卡死,这时假分页就会显得很不人性化,因此有了真分页的必要性. 正如上篇博文总结归纳,“真”相对 ...

  2. java7,java8 中HashMap和ConcurrentHashMap简介

    一:Java7 中的HashMap 结构: HashMap 里面是一个数组,然后数组中每个元素是一个单向链表.链表中每个元素称为一个Entry 实例,Entry 包含四个属性:key, value, ...

  3. 20155227 2016-2017-2 《Java程序设计》第八周学习总结

    20155227 2016-2017-2 <Java程序设计>第八周学习总结 教材学习内容总结 NIO与NIO2 NIO即New IO.java从JDK1.4开始提供了NIO,在JAVA ...

  4. HTML+CSS写下拉菜单

    今天学习了使用HTML+CSS实现下拉菜单效果,在这个例子中,我学到了如下知识点: 设置背景图片(background-image.background-size) 如何让无序列表横向显示(float ...

  5. c语言.函数指针数组

    函数指针: 一个指向函数的指针.一般用函数名表示. 函数指针数组:元素为函数指针的数组.转移表.c语言中函数不可以定义为数组,只能通过定义函数指针来操作. #include<stdio.h> ...

  6. 关于内核中spinlock的一些个人理解 【转】

    由于2.6内核可以抢占,应该在驱动程序中使用 preempt_disable() 和 preempt_enable(),从而保护代码段不被抢占(禁止 IRQ 同时也就隐式地禁止了抢占).preempt ...

  7. shell函数中eof报错(warning: here-document at line 9 delimited by end-of-file (wanted `EOF'))

    在shell编写函数时,函数中有eof和EOF,如果是在sublime编写按照格式tab缩进会有以下报错 解决办法: 取消函数中的tab缩进,在运行即可

  8. Python学习一|anaconda的安装问题以及Python语言的特点

    安装时遇到的问题 安装anaconda3.0到D盘之后,配置好两个环境变量:D:\anaconda和D:\anaconda\Scripts.发现在命令行中执行python指令可以,但conda指令却是 ...

  9. Kaggle大数据竞赛平台入门

    Kaggle大数据竞赛平台入门 大数据竞赛平台,国内主要是天池大数据竞赛和DataCastle,国外主要就是Kaggle.Kaggle是一个数据挖掘的竞赛平台,网站为:https://www.kagg ...

  10. NET-知识点:C#中Equals和==比较

    第一.相等性比较 其实这个问题的的本质就是C#的相等比较,相等比较可以分两类: 1.引用相等性,引用相等性指两个对象引用均引用同一基础对象. 2.值相等性,值相等性指两个对象包含相同的一个或多个值,其 ...