微信小程序 - 自定义组件支持外部class或者style样式 (Component - externalClasses)
发布日期:2021-06-29 11:37:54
浏览次数:2
分类:技术文章
本文共 757 字,大约阅读时间需要 2 分钟。
-
在小程序开发的时候,我们有时候需要自定义或者封装一个小组件用到多处导入使用,怎么样才能使用外部设置进来的
class
或者style
样式呢。 -
通过
externalClasses
既可以导出当前组件需要外部设置的class
属性,这个属性是个数组,例如:externalClasses: ['new-class', 'new-class', ...]
。 -
my-component.js
Component({ // 外部样式属性定义,其实也就是把内部需要外部支持的 class 名称放这里导出 // 在外部直接使用导出的名称字段关联即可,可以同时导出多个,这里是数组 ['','',...] externalClasses: ['inner-class'], // 外部使用的属性定义 properties: { // 这里定义了 innerText 属性,属性值可以在组件使用时指定 innerText: { type: String, value: 'default value', } }, data: { // 这里是一些组件内部数据 someData: {} }, methods: { // 这里是一个自定义方法 customMethod: function () { } }})
-
my-component.wxml
{ {innerText}} -
使用组件的页面 index.wxml
-
使用组件的页面 index.wxss
.inner-class { background-color: red;}
-
效果
转载地址:https://blog.csdn.net/zz00008888/article/details/109224813 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
不错!
[***.144.177.141]2024年04月14日 16时45分02秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
人工智能药物研发
2019-04-29
【超级干货+福利】AIDD最全面的学习教程
2019-04-29
最新通知:AIDD与网络药理学资料大全
2019-04-29
Lammps分子动力学与第一性原理材料模拟及催化
2019-04-29
实习生小白的日常
2019-04-29
实习小白的日常(3)
2019-04-29
实习小白的日常(4)
2019-04-29
APP页面布局参考
2019-04-29
linux 的 Socket IO 模型
2019-04-29
APP调用服务器API设计
2019-04-29
Opencv+Zbar二维码识别(标准条形码/二维码识别)
2019-04-29
zbar优化
2019-04-29
微信扫码登录验证PHP代码(不用开放平台)
2019-04-29
CH554E USB单片机 10引脚小封装低成本USB方案
2019-04-29
windows MQTT客户端
2019-04-29
LINUX下挂载(mount)查看树莓派镜像文件
2019-04-29
基于CH568芯片加密SD卡方案
2019-04-29
1元钱的超低成本单芯片USB单片机方案
2019-04-29
单片机/树莓派扩展双串口(TTL和RS485)
2019-04-29