夏2同学的个人小站

Appearance

On this page

驯鹿

微信小程序_组件学习_001 ​

view标签 ​

等效于html中的div

都是块级元素，独占一行，可设置宽高。

属性类型默认值
hover-classstringnone

hover的中文意思是悬浮，但在微信小程序里面是按下去的意思。

当用户按下按钮的时候生效。

动画_(2)

text标签 ​

等效于html中的span标签

属性类型默认值说明
user-selectbooleanfalse文本是否可选，该属性会使文本节点显示为 inline-block
spacestring无显示连续空格
decodebooleanfalse是否解码

user-select，就是是否允许用户进行选择，选择后会出现对话框（复制，粘贴）。

备注：这个效果只有真机可以测试出来，在微信小程序代码编辑器中无法显示。

space就是是否解析连续的空格。

众所周知，在html中文字中间有连续的空格的时候，html会解析成一个空格。详细解析

所以，微信小程序，对它进行了补充，允许解析连续空格。

html
<text>
  文字       中间 有空格
</text>

<text space="nbsp">
  文字       中间 有空格
</text>

image-20200910210605302

加了 space="nbsp" 后连续空格就别解析出来了。

推荐space使用属性nbsp，其余的不用去记，用不上。

decode属性就是表示是否解码

html
<text decode="true">
   中间&nbsp;空格&lt;;
</text>

image-20200910211614969

可以用来解码

&nbsp; 和 &lt;等

等效于html中的a标签

navigator的中文含义是导航，字面意思，把你导向其他方向。

比如从主页跳转到logs页面

html
<navigator url="/pages/logs/logs">
  点我跳转到日志
</navigator>

![动画 (3)](http://imgbed-xia-2.oss-cn-hangzhou.aliyuncs.com/img/动画 (3).gif)

这种默认打开后是二级页面的形式，左上角有个返回按钮。

image-20200910212426249

如果不想二级页面，想作为一个新的页面，那么就在 open-type里面写上redirect。

html
<navigator url="/pages/logs/logs" open-type="redirect">
  点我跳转到日志
</navigator>

image-20200910212805362

此时左上角就是一个小屋子图标。

icon标签 ​

见名知意，用于显示图标。

属性类型默认值必填说明
typestring是icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear
sizenumber/string23否icon的大小
colorstring否icon的颜色，同css的color
html
<icon type="success" size="60" class="box"></icon>

image-20200910220836909

type的有效值有：success, success_no_circle, info, warn, waiting, cancel, download, search, clear

scroll-view标签 ​

你可以把它理解成手机端的滚动条，可以横着滚，也可以竖着滚。

属性默认值必填说明
scroll-xfalse否允许横向滚动
scroll-yfalse否允许纵向滚动

滚动条demo

![动画 (4)](http://imgbed-xia-2.oss-cn-hangzhou.aliyuncs.com/img/动画 (4).gif)

html
<scroll-view scroll-x>
  <view class="out">
    <icon type="success" size="60" class="box"></icon>
    <icon type="success_no_circle" size="60" class="box"></icon>
    <icon type="info" size="60" class="box"></icon>
    <icon type="warn" size="60" class="box"></icon>
    <icon type="waiting" size="60" class="box"></icon>
    <icon type="cancel" size="60" class="box"></icon>
    <icon type="download" size="60" class="box"></icon>
    <icon type="search" size="60" class="box"></icon>
    <icon type="clear" size="60" class="box"></icon>
  </view>
</scroll-view>
css
.out{
  display: flex;
  flex-wrap: nowrap;
}