小程序组件之——cover-view与view与text

cover-view与view

ok，介绍完了图片的两种组件，我们再来介绍两种组件。
cover-image和view这两个组件的作用是。。。都知道div吧？这个东西和div一毛一样，块级元素、独占一行、没啥含义，就是容器。
它们的区别就像是cover-image与image的区别一毛一样，就是cover-view会成为全场最靓的崽（始终在页面可视区域的最上面）
上代码！
_wxml

<cover-view>博主最帅</cover-view>
<view>博主最帅</view>
<div/>

_wxss

div{
	width: 100%;
	height: 200px;
	position: fixed;
	top: 0;
	left: 0;
	background-color: green;
}

然后就是效果图啦，我先给你们看看在微信开发者工具中的效果吧

emmmmm…是的两者没人任何区别（或者说是看不出区别）
但是在手机中的效果

你们看，下面的view会被挡住，而cover-image依旧是那么坚定的在页面的最上方，不会被别人挡住的（我突然想思考这样一个问题，当cover-image与cover-view放在一起时候，会怎么样呢？说干就干）
_wxml：

<cover-view>博主最帅</cover-view>
<cover-image src="/assets/images/2.png"></cover-image>

_wxss：

cover-image{
	position: fixed;
	top: 0;
	left: 0;
	height: 100rpx;
	z-index: 10;
}
cover-view{
	position: fixed;
	top: 0;
	left: 0;
	z-index: 11;
}

_效果图：

emmmm。。。。看样子是cover-view在上面

这样又是cover-image在上面
看见区别了吗？这两个东西层叠，看z-index的大小。谁大谁在上面（别想多啊）。
**我们继续：**组件都是有一些属性的，就像前面我介绍的图片的bindload和binderror属性。view也是有一些属性的。比如–>
hover-class:这个属性后面跟一个css样式的一个类名。这个样式是用户点击时候触发的样式
比如

默认的背景色是黄色，点击时候呢。。。

他就变红了。感觉自己好蠢啊。
算上这个，还有三个（至少在官方文档上是这样的），诺，我给你们找出来了，说的挺明白的，看看就能会了。

text

这。。。大家知道span吗？不知道的出门左转，不送。
这个东西和span的功能一毛一样，行内元素，不会独占一行。

emmmm…这个啊，额，你们听我给你编！！！

对不起！！！我再来试试。

欧吼～你看，我就说可以吧！发现问题出在哪里了没，没错，它们得有一个相同的祖节点。外面没个公共标签，还真不好用。外面包个text呢？

好像。。。view组件消失了，不，不是消失了，在控制台还是能看见它的，但是它确实不显示了（要拿小本本记下来）。 text组件只能嵌套text组件。
老规矩，将了基本用法，我们来讲讲属性吧。
selectable：这个属性就是说文本是不是可以被你长按复制，默认是不可以的，所有，有时候text还蛮好用的嘛。

就这样，文字就允许被复制了，很简单不是吗？
space：是否显示连续的空格，这个大概就是pc端的pre标签了吧。

中间有多少空格都可以打出来了。如果不写这个属性，有多少空格都只会显示一个空格。
decode:它决定你是不是要解析文本内的一些特殊字符串，比如说&nbsp；这个东西，应该都知道是空格的意思。那么。。。。看图！

好了text和view与cover-view的基本内容就都在这啦。下期见。
上一篇：小程序组件之——cover-image与image                     下一篇：小程序组件之–match-media