常用组件
组件 | 解释 |
---|
view | 普通视图容器类,类似于html中的div(是一个块级元素),常用来实现页面布局效果 |
scroll-view | 可滚动视图容器,常用来实现滚动列表效果 |
swiper和swiper-item | 轮播图视图容器组件和轮播图项目组件 |
text | 文本区域,通过selectable 属性可以实现长按选中文本 内容(view无法实现) |
rich-text | 通过nodes 属性节点将html字符串渲染为对应的UI 结构 |
button | 按钮组件,比html功能丰富(通过open-type属性可调用微信通过的各种功能[客服、转发、获取用户授权、获取用户信息]) |
image | 图片组件(默认宽度为300px,高240px) |
navigator | 页面导航组件(类似于html中的a链接) |
1.1.view
<view class="container1">
<view>1</view>
<view>2</view>
<view>3</view>
</view>
.container1{
display: flex;
justify-content: space-around;
}
.container1 view{
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
}
.container1 view:nth-child(1){
background-color: aqua;
}
.container1 view:nth-child(2){
background-color: rebeccapurple;
}
.container1 view:nth-child(3){
background-color: yellowgreen;
}
1.2.scroll-view
<scroll-view class="container1" scroll-y>
<view>1</view>
<view>2</view>
<view>3</view>
</scroll-view>
.container1{
display: flex;
justify-content: space-around;
border: 1px solid red;
height: 150px;
width: 100px;
}
.container1 view{
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
}
.container1 view:nth-child(1){
background-color: aqua;
}
.container1 view:nth-child(2){
background-color: rebeccapurple;
}
.container1 view:nth-child(3){
background-color: yellowgreen;
}
1.3.swiper 和 swiper-item

<swiper class="swiper-container" indicator-dots indicator-color="white" indicator-active-color="yellow" autoplay="true" interval="1000" circular="true">
<swiper-item>
<view class="item">A</view>
</swiper-item>
<swiper-item>
<view class="item">B</view>
</swiper-item>
<swiper-item>
<view class="item">C</view>
</swiper-item>
</swiper>
.swiper-container{
height: 150px;
}
.item{
height: 100%;
text-align: center;
line-height: 150px;
}
swiper-item:nth-child(1) .item{
background-color: lightblue;
}
swiper-item:nth-child(2) .item{
background-color: lightgreen;
}
swiper-item:nth-child(3) .item{
background-color: lightpink;
}
1.4.text和rich-text
<text selectable>这是我的手机号:15978521854</text>
<rich-text nodes="<h1 style='color :red;'>标题</h1>"></rich-text>
1.5.button
属性 | 解释 |
---|
type | 指定按钮类型,默认灰色按钮,primary(绿色按钮),warn(警告按钮) |
size | 指定按钮尺寸大小,默认大尺寸,mini(小尺寸) |
plain | 指定按钮是否镂空 |
<button>默认按钮</button>
<button type="primary">绿色按钮</button>
<button type="warn">警告按钮</button>
<button size="mini">小尺寸白色按钮</button>
<button type="primary" size="mini">绿色小按钮</button>
<button type="warn" size="mini">警告小按钮</button>
<button size="mini" plain>小尺寸白色镂空按钮</button>
<button type="primary" size="mini" plain>小尺寸绿色镂空按钮</button>
<button type="warn" size="mini" plain>小尺寸红色镂空按钮</button>
1.6.image

<image></image>
<image src="../../images/download.jpg"></image>
<image src="../../images/download.jpg" mode="heightFix"></image>