一.slot的使用
从外部传入标签显示在slot标签中
1.name=“ ”一致
2.想在组件内部显示 则不能用单标签 写在双标签内部
//pages
<v-tag text="{{item.content}}">
<text class="num" slot="after">{{'+'+item.nums}}</text>
</v-tag>
//components
<slot name="after"><slot>
//js
Component({
/**
* 组件的属性列表
*/
options: {
multipleSlots: true//启用slot
},
})
二.自定义组件样式的探讨
1.运用css选择器
运用css选择器,选择标签的第一个和第二个,进行样式的修改
1.1问题
1.1.1 样式没有生效
首先 v-tag是自定义组件,我们平常写样式、内置组件
自定义组件 设置css无效 要选择内置组件
//生效
.comment-container :nth-child(1) view {
background-color: #fffbbb;
}
1.1.2 子元素 选择器 后代选择的区别
//推荐 精准 安全 不会影响其他元素
.comment-container>:nth-child(1)>view {
background-color: #fffbbb;
}
Hack?
1.1.3 开源组件
平衡 默认样式和自定义样式
为组件找到一套不违反组件封装原则的样式
不违反eg:属性,slot
用户通过参数传递改
不推荐内联样式 绑定数据
通过小程序 css和js的机制
小程序内部有一个 externalClass 是第三种不违反组件封装的机制
标签之间有间距 并且自动换行
/* 如果不设置felx布局,margin无法生效 */
普通样式
外部样式 从组件外部传入的class
如果使用外部样式,那就所有的样式从外部传进来
因为普通样式和外部样式无法分辨谁覆盖谁 由于机制
相比较而言,还是hack方式比较方便
text组件本身就可以编译\n
为什么没有转换为换行 变异
通过对response的返回数据 发现 返回数据 \n=》\ \n
\ 转义字符
func()
Waste
三.wxs
编写过滤器
四.限制显示数量