组件 | 解释 |
---|---|
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
<!--pages/list/list.wxml-->
<!-- 不能设置类名为container -->
<view class="container1">
<view>1</view>
<view>2</view>
<view>3</view>
</view>
/* pages/list/list.wxss */
.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-x : 运行横向滚动,scroll-y : 运行纵向滚动
- 注意:使用纵向滚动时,必须给 scroll-view 一个固定高度
<!--pages/list/list.wxml-->
<!-- 注意:使用纵向滚动时,必须给 scroll-view 一个固定高度 -->
<!-- scroll-x : 运行横向滚动 -->
<!-- scroll-y : 运行纵向滚动 -->
<scroll-view class="container1" scroll-y>
<view>1</view>
<view>2</view>
<view>3</view>
</scroll-view>
/* pages/list/list.wxss */
.container1{
display: flex;
justify-content: space-around; /* 实现横向分散布局 */
border: 1px solid red;
height: 150px; /* 使用纵向滚动时,必须给 scroll-view 一个固定高度 */
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轮播图容器
<!--pages/lunbotu/lunbotu.wxml-->
<!-- indicator-dots:显示面板指示点 -->
<!-- circular="true"采用衔接滑动,如果图片播放完了,就继续播放第一张图片 -->
<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>
/* pages/lunbotu/lunbotu.wxss */
.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
新版样式:在app.json中设置
"style": "v2"
,想用老版样式就把它删了
属性 | 解释 |
---|---|
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组件的
mode属性
来指定图片的裁剪
和缩放
模式
<image></image> <!-- 空图片 -->
<image src="../../images/download.jpg"></image> <!-- mode属性使图片有默认的宽度和高度,优点是图片不会被裁剪和缩放,,缺点是图片会失真 -->
<image src="../../images/download.jpg" mode="heightFix"></image> <!-- 高度不变,宽度根据图片的高宽比自适应-->