【小程序】微信小程序自定义组件Component详细总结
1- 前言
在本文中你将收获
- 小程序如何使用自定义组件
- 自定义组件之间的传值
- 自定义组件中插槽的使用
2- 组件文件新建
2.1 定义组件
在根目录新建components文件夹，建立cell 文件夹，右击创建cell的Component组件
- cell.js
- cell.wxml
- cell.json
- cell.wxss
2.2 注册组件
页面的xxx.json ，usingComponent注册
"usingComponents": {"item":"/components/item/item"
}
2.3 使用组件
<item></item>
2.4 图参考
3- 外部类和样式隔离
3.1定义组件
- cell.wxml 文件
<view class="cell cell-class">
</view>
- cell.wxss
/* pages/com/com.wxss */
.cell{color: tomato;
}
.mycell{color: #f70;line-height: 120rpx !important;
}
- cell.js 文件
/* 选项 */options:{/* 样式隔离：apply-shared 父影响子shared 父子相互影响 isolated 相互隔离*/styleIsolation:'isolated',},//通过组件的外部类实现父组件控制自己的样式externalClasses:["cell-class"],
3.2 使用组件
<cell></cell>
<cell cell-class="mycell"></cell>
3.3 图解释
4- 组件插槽
4.1 默认插槽
- cell.wxml
<view class="cell">我是cell组件<slot></slot>
</view>
- cell.js
/* 选项 */options:{//允许多个插槽multipleSlots:true,},
- cell.wxss
.cell{height: 88rpx;line-height: 88rpx;border-bottom: 1rpx solid #cccccc;
}
使用cell组件
<cell><text>放假</text><text>快点到来</text>
</cell>
4.2 命名多插槽
- cell.wxml
<view class="cell cell-class"><slot name="pre"></slot>我是cell组件<slot></slot><slot name="next"></slot>
</view>
- cell.js
/* 选项 */options:{//允许多个插槽multipleSlots:true,},
- cell.wxss
.cell{height: 88rpx;line-height: 88rpx;border-bottom: 1rpx solid #cccccc;
}
- com.wxml
<!-- 插槽 -->
<cell><text slot="pre">
【小程序】微信小程序自定义组件Component详细总结相关推荐
- 【一步步学小程序】3. 使用自定义组件(component)
上一节创建了一个包含多个课程数据的列表.这一节我们用自定义组件(component),来优化列表页面,即如图,我们把每个课程单元格封装为组件. 使用组件的好处: 自定义组件可以在不同的页面中重复使用 ...
- 小程序 自定义组件Component
1.创建组件(1)一个自定义组件由json.wxml.wxss.js这4个文件组成(2)在对应json文件中声明为自定义组件{"component": true}2.组件配置Com ...
- 小程序源码：炫酷手持滚动弹幕生成小工具微信小程序-多玩法安装简单
这是一款滚动弹幕生成微信小程序源码 让弹幕文字在手机屏幕上跑起来,LED弹幕 手机弹幕,告白神奇,等 支持多种模板,每一种模板都支持自定义颜色等等 字体跳动,字体表白等等 另外用户也可以支持自定义文字 ...
- 小程序 | 微信小程序实现循环嵌套数据选择
小程序 | 微信小程序实现循环嵌套数据选择 一.效果展示 二.代码实现 在.wxml文件中,有时从后台传来的数据可能会出现数组嵌套数组的情况,需要利用wx:for嵌套实现数据的展示.这时,外层循环正常 ...
- 小程序--微信小程序使用阿里巴巴矢量库图标
小程序–微信小程序使用阿里巴巴矢量库图标 2020年4月20日 阿里巴巴矢量库 1.导图 1.1下载图标项目 注:项目默认引用名是iconfont,我这里改成了font,所以我引用的第一个class是 ...
- 小程序源码：修复图片音频全新升级带特效喝酒神器小游戏微信小程序
这是一款全新升级带特效喝酒神器小游戏微信小程序源码 小编发现很多喝酒神器小程序都不带特效和音效的 感觉差了那么一点意思而且感觉也不炫酷 所以小编今天给大家带来一款带特效,音效炫酷的喝酒神器 该款神器由 ...
- 微信小程序----微信小程序浏览pdf文件
微信小程序----微信小程序浏览pdf文件 说明:通过wx.downloadFile,wx.openDocumen来实现打开pdf文件.只需在js操作即可. HTTP.Config.Request(' ...
- 微信小程序—微信小程序端支付代码
只有微信小程序端的代码,如下 Page({data: {},onLoad: function (options) {// 页面初始化 options为页面跳转所带来的参数var that = this ...
- 小程序 | 微信小程序实现商品分类列表
小程序 | 微信小程序实现商品分类列表 一.效果展示 二.代码实现 <!-- wxml --> <view class="container"> <! ...
最新文章
- Happy WS 之 控制台 -- Happy Console （一）
- c语言贪吃蛇编写分析,刚学C语言，想写一个贪吃蛇的代码
- 净化网络环境！可信数字内容版权服务解决方案发布
- 信道分类、信道复用技术、CSMA/CD 协议、PPP 协议、MAC 地址、局域网、以太网、交换机、虚拟局域网
- python flask 大文件 下载_flask - python上传大文件到服务器报错
- arch linux arm下载_arm开发板运行hello word的详细过程
- 03_zookeeper伪集群安装
- Javascript设计模式之发布-订阅模式
- 飞书上线“程序员友好”功能 迎接1024程序员节
- log4j中将SocketAppender将日志内容发送到远程服务器
- whitepages 配合调查_“你好，我是警察！请配合我们的调查......”_政务_澎湃新闻...
- 海康威视多路播放开发步骤及参考代码
- opencontrail vrouter 中的数据流程
- 12款好用超赞的国外搜索资源网站 ，开发者们的标配，你都知道吗？不知道就OUT了...
- 【论文笔记】Semantic Parsing on Freebase from Question-Answer Pairs
- matlab中syms x是什么意思,matlab中怎样定义未知数，如x，syms是什么意思？
- 闲置电脑挂机赚钱-Traffmonetizer，支持windows,linux,Android,MacOS多平台
- (附代码)数独大作业【读取数独，解数独，生成唯一解数独（随机，特定形状，不同难度生成），玩数独】
- 淘宝电商需求文档的书写
- 你不是骄傲，而是活得太傲娇了
热门文章