微信小程序 自定义组件 父子组件传 class

我是搞APP的,但是最近APP的业务不多了,公司便让我去搞微信小程序。。一万个草泥马飞过。。。

有时候我们有这一种需求:在使用组件的时候,我们希望子组件的某些样式由父组件来控制,比如导航栏-navgationbar的背景,我可以使用图片,也可以使用css指定,这样是不是非常方便?

因为导航栏默认的太丑,所以,我自定义了导航栏的显示组件。前提是隐藏了默认的导航栏。

整个实现过程如下:

第一步:

为子组件增加:externalClasses: ['bar-background-css'],注意不是在properties里面增加 。而是平行于properties来增加。

[]里面就是你要接收父组件传过来的class样式。这里非常恶心的一点:[]不能出现鸵峰式的命名。你把bar-background-css改为barBackgroundCss特么的就无效了,起不了作用。读者朋友可以自行尝试看一下效果。

第二步:

在子组件的页面文件,即wxml文件中,对使用此样式的dom增加class="bar-background-css",至此,整个子组件的修改或者说牵扯到的文件就已经修改完毕。

第三步:

父页面的调用:一定要将子组件在父页面的json文件中注册。注意写法是""而不是"{{}}".

在父页面的样式文件即wxss文件中定义bar-bg-view样式。

经过以上三步,就已经增加完毕了。现在我们来看看运行效果。颜色为red。

颜色为过渡色,再看看。

至此结束。阅读愉快。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 好吧,突然发现学不完了,一下子,那就分开吧,由于时间太久,直接重新大致复习了一下 微信小程序自定义组件微信小程序支...
    小小小8021阅读 2,630评论 0 9
  • 一、理论基础知识部分 1.1、讲讲输入完网址按下回车,到看到网页这个过程中发生了什么 a. 域名解析 b. 发起T...
    我家媳妇蠢蠢哒阅读 3,155评论 2 106
  • 因新工作主要负责微信小程序这一块,最近的重心就移到这一块,该博客是对微信小程序整体的整理归纳以及标明一些细节点,初...
    majun00阅读 7,392评论 0 9
  • 测试referer字段refer
    bohunwuren阅读 218评论 0 0