一.组件模板和样式

类似于页面,自定义组件拥有自己的 wxml 和模板 wxss 样式。

1.组件模板

组件的写法和页面的写法相同,组件模板与组件数据结合后生成的数节点,

将被插入到组件的引用位置。在组件模板中提供一个<slot> 节点,用于承载组件

引用时候提供的子节点。

例如:

<view class="wrapper">

<view>这里是组件的内部节点</view>

<slot></slot>

</view>

引用在页面的.json 文件中配置。

"usingComponents": {

"v-component": "/components/cs/cs"

}

"v-component" :为自定义的模板名字,页面引用的时候用,

"/components/cs/cs"  引用组件的路径

页面中引用 如下:

<v-component>

<view>这里是插入到组件slot中的内容</view>

</v-component>

2.组件中的模板数据绑定

与普通的模板数据绑定相同,动态像子组件传递数据。

例如:

<v-component  prop-a="{{dataA}}" prop-b="{{dataB}}">

<view>这里是插入到组件slot中的内容</view>

</v-component>

组件接收到页面传递过来的数据,页面可以通过setData 来改变绑定的绑定字段。

(目前只能传递JSON数据)

3.组件的wxml 的slot

默认情况下,一个组件的wxml 中只能有一个slot,需要使用多个slot 时,可以在组件js

声明启用。

Component({

options:{

multipleSlots: true // 在组件定义的选项中启用多slot 支持

},

properties:{},

methods:{}

})

此时在组件就可以启用多个slot,以不同的name 来区分。

例如:

<view class="wrapper">

<slot name=“head”></slot>

<view>这里是组件的内部节点</view>

<slot name="footer"></slot>

</view>

在使用的时候

<v-component >

<view slot="head">slot中的头部内容</view>

<view slot="footer">slot中的底部内容</view>

</v-component>

4.组件样式

组件对应wxss 文件的样式,只对组件wxml 内的节点生效。编写组件样式时注意:

(1) 组件和引用的页面,不能使用id选择器,(#a),属性选择器([a])和标签名属性

选择器,请改用class 选择器。

(2) 组件和引用组件的页面中使用后代选择器(.a .b) 在极端情况下会有非预期的表现。

(3)子元素选择器(.a>.b) 只能用于view 组件与其子节点之间,用于其他组件可以能导致

非预期的情况。

(4)继承样式,如font , color 会从外部组件继承到组件内。

(5)除继承样式外,app.wxss 中的样式,组件所在页面中的样式对自定义样式无效。

(6)组件可以指定节点的默认样式 :host{color:yellow;}

5.外部样式

组件接收外部传入的样式类,可以在Component 中用externalClasses 定义若干个外部样式

类,这个特性可以用实现类似于,view 组件的 hover-class属性,页面可以提供一个样式类

赋予 view 的hover-class 这个一样式类写在页面中,而非, view 组件的实现中。

例如:

/* 组件 custom-component.js */

Component({

externalClasses:['my-class']

})

<!-- 组件 custom-component.wxml -->

<v-component class="my-class" >

这段文本的颜色由外部组建的 class 觉得

</v-component>

组件的使用或者可以指定这个样式类对应的class, 就像使用普通属性样式一样

页面的WXML

<v-component  my-class="red-text"></v-component>

.red-text{

color:red;

}

6.使用组件接收全局样式

默认情况下,自定义组件的样式只受到wxss 的影响

(1) app.wxss 中使用了标签名选择器,影响到页面和全部组件,

(2) 在自定义的组件中激活了 addGlobalClass 选项,这样使自定义

组件能被app.wxss 或页面的wxss 中的所有样式。

要激活 addGlobalClass 选项,只需在Component 构造中将 options.addGlobalClass

字段为true (当激活了 addGlobalClass 选项后,存在外部样式污染样式组件的风险)

/* 组件 custom-component.js */ Component({ options: {     addGlobalClass: true,   }   })

/* 组件 custom-component.wxml  */

<text class="red-text">

这段文字颜色由 `app.wxss`和页面`wxss` 中的样式定义来规定

</text>

/*app.wxxs*/

.red-text{

color:red;

}

小程序 组件 Component的更多相关文章

  1. 小程序-组件component和模版template的选择和使用

    小程序提供了组件component和模版template那什么时候 选择哪一个使用呢?我总结了一下 template主要是模版,对于重复的展示型模块进行展示,其中调用的方法或者数据data都是需要引用 ...

  2. selectComponent是ok的,小程序组件 component方式,让子页面重绘

    this.selectComponent('#news').init(); 其中news是父级xml文件引用子组件的时给子组件的id. 当父级传给子级的数据有变化时,需要子页面重绘,所以就用上面那行代 ...

  3. 小程序组件化框架 WePY 在性能调优上做出的探究

    作者:龚澄 导语 性能调优是一个亘古不变的话题,无论是在传统H5上还是小程序中.因为实现机制不同,可能导致传统H5中的某些优化方式在小程序上并不适用.因此必须另开辟蹊径找出适合小程序的调估方式. 本文 ...

  4. 微信小程序-组件篇

    一.摘要 组件是小程序整个语法中占比比较大的一部分,没写过组件可以说只懂了半个小程序.组件提供了类似页面的生命周期与逻辑.相比于模板,组件能实现的功能更加全面,也更为强大.通过slot可以自由扩展组件 ...

  5. 小程序组件--> 组件传参

    小程序组件,在components文件夹右击-->创建文件夹-->右击-->新建component即可 创建一个组件 如果多个地方需要使用到,可以在app.json中加入一下代码,相 ...

  6. 微信小程序(组件demo)以及预览方法:(小程序交流群:604788754)

    1. 获取微信小程序的 AppID 登录 https://mp.weixin.qq.com ,就可以在网站的"设置"-"开发者设置"中,查看到微信小程序的 Ap ...

  7. WePY | 小程序组件化开发框架

    资源连接: WePY | 小程序组件化开发框架 WePYAWESOME 微信小程序wepy开发资源汇总 文档 GITHUB weui WebStorm/PhpStorm 配置识别 *.wpy 文件代码 ...

  8. 小程序组件 scroll-view 滑动

    小程序组件 scroll-view 中分别有上下竖向滑动和左右横向滑动之分,在这次项目中刚好需要用到横向滑动,但在测试过程中发现横向滑动没有了效果(静止在那里没移动过),经调试发现: 1.scroll ...

  9. 微信小程序组件化实践

    Do Not Repeat Yourself 如何提高代码质量,方法有许多:抽象.模块.组件化,我认为它们的中心点都是--Do Not Repeat Yourself. 小程序组件化 我们先看看小程序 ...

随机推荐

  1. SPARK - Execute Framework

    Spark函数详解系列之RDD基本转换 https://www.cnblogs.com/MOBIN/p/5373256.html The  RDD provides low level API for ...

  2. 自动生成了一本ES6的书

    ![WeChat_1462668550.jpeg](http://upload-images.jianshu.io/upload_images/1952818-7bd17a9dd6401dc6.jpe ...

  3. MUI框架-02-注意事项-适用场景-实现页面间传值

    MUI框架-02-注意事项-适用场景-实现页面间传值 关于开发,我拷贝太多也没什么意义,就请查阅:官方文档:http://dev.dcloud.net.cn/mui/ui/ 快速入门 - 注意事项 有 ...

  4. centos7安装lua语言环境

    Linux 上安装 Lua 安装非常简单,只需要下载源码包并在终端解压编译即可. 官网地址:http://www.lua.org/download.html 我这里安装的是:lua-5.3.0.tar ...

  5. laravel middleware

    当你使用larvel创建一个相对比较复杂的web网站时,往往你的routes文件就会变得很庞大.一般来说在开始网站编码之前,最好做一个整体规划,把这些route逻辑上划分为不同的group,每一个gr ...

  6. [翻译] KVNProgress

    KVNProgress KVNProgress is a fully customizable progress HUD that can be full screen or not. KVNProg ...

  7. [翻译] JNWSpringAnimation

    JNWSpringAnimation https://github.com/jwilling/JNWSpringAnimation JNWSpringAnimation is a subclass o ...

  8. 装饰器( decorate )

    装饰器分步解释-形成过程: #-*- coding: UTF-8 -*- #示例1: def deco(p_args): def pack(): print('haha,i am deco fun') ...

  9. Exchange 2010 服务器邮件传输配额设置详解

    在企业的邮件系统管理中,传输邮件的大小配额关系到邮件队列.邮件传输速度以及关系到该附件是否能正常发送,直接关系到用户体验.为此,传输邮件大小的设置,也经常是企业邮件管理员比较迷惑的地方.如下: 1)  ...

  10. August 12th 2017 Week 32nd Saturday

    That which does not kill us makes us stronger. 但凡不能杀死你的,最终都会使你更强大. Seemingly I have heard this from ...