Skip to content
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标签

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

属性类型默认值必填说明
typestringicon的类型,有效值:success, success_no_circle, info, warn, waiting, cancel, download, search, clear
sizenumber/string23icon的大小
colorstringicon的颜色,同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;
}