目录
一.常用的视图组件
1.view
- 普通视图区域
- 类似与HTML中的div,是一个块级元素
- 常用来实现页面的布局效果
使用效果:
wxml文件:
<view class="container1">
<view>A</view>
<view>B</view>
<view>C</view>
</view>
wxss文件:
.container1 view{
width: 100px;/*宽*/
height: 100px;/*高*/
text-align: center;/*居中*/
line-height: 100px;/*纵向居中*/
}
.container1 view:nth-child(1){
background-color: lightblue;
}
.container1 view:nth-child(2){
background-color: lightgreen;
}
.container1 view:nth-child(3){
background-color: lightpink;
}
/*给三个view加上不同的颜色*/
.container1{
display: flex;/*将三个view横向排列*/
justify-content: space-around;/*横向分散对其齐*/
}
效果图:
2.scroll-view
- 可滚动的视图区域
- 常用来实现滚动列表效果
使用效果:
wxml文件:
<!-- scroll-y属性:允许纵向滚动 -->
<!-- scroll-x属性:允许横向滚动 -->
<!-- 注意:使用竖向滚动时,必须给scroll-view一个固定高度 -->
<scroll-view class="container1" scroll-y>
<view>A</view>
<view>B</view>
<view>C</view>
</scroll-view>
wxss文件:
.container1 view{
width: 100px;/*宽*/
height: 100px;/*高*/
text-align: center;/*居中*/
line-height: 100px;/*纵向居中*/
}
.container1 view:nth-child(1){
background-color: lightblue;
}
.container1 view:nth-child(2){
background-color: lightgreen;
}
.container1 view:nth-child(3){
background-color: lightpink;
}
/*给三个view加上不同的颜色*/
.container1{
border: 1px solid red;
/*给scroll-view一个固定高度*/
height: 120px;
width: 100px;
}
效果图:
可以使用鼠标上下拖动,达到滚动的效果!
3.swiper和swiper-item
- 轮播图容器组件和轮播图item组件
使用效果:
wxml文件:
<!-- 轮播图区域 -->
<!-- indicator-dots 属性:显示面板指示点 -->
<swiper class="swiper-container">
<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>
wxss文件:
.swiper-container{
height: 150px;/*轮播图高度*/
}
.item{
height: 100%;
line-height: 150px;
text-align: center;
}
swiper-item:nth-child(1) .item{
background-color: lightgreen;
}
swiper-item:nth-child(2) .item{
background-color: lightblue;
}
swiper-item:nth-child(3) .item{
background-color: lightcoral;
}
效果图:
l
circular实现衔接滑动,滑倒C,往右滑动回到A,类似循环队列!!
例如:加上 indicator-dots 属性
<!-- 轮播图区域 -->
<!-- indicator-dots 属性:显示面板指示点 -->
<swiper class="swiper-container" indicator-dots>
<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>
效果图:可与上进行对比
4.text
- 文本组件
- 类似与HTML中的span标签,是一个行内元素
使用效果:
wxml文件:
<view>
手机号支持长按选中保存
<text selectable>18814231000</text>
</view>
<!-- 只有在text中的文本才能长按保存(必须加上selectable),view中不可长按保存 -->
效果图:
5.rich-text
- 富文本组件
- 支持把HTML字符串渲染为WXML结构
通过rich-text组件的nodes属性节点,把HTML字符串渲染为对应的UI结构:
wxml文件:
<view>
手机号支持长按选中保存
<text selectable>18814231000</text>
</view>
<!-- 只有在text中的文本才能长按保存(必须加上selectable),view中不可长按保存 -->
<rich-text nodes="<h1 style='color:red;'>标题<h1>"></rich-text>
效果图:
6.button
- 按钮组件
- 功能比HTML中的button按钮丰富
- 通过open-type属性可以调用微信提供的各种功能(客服、转发、获取用户授权等)
使用效果:
wxml文件:
<!-- 按钮组件的基本使用 -->
<!-- 通过type属性指定按钮颜色类型 -->
<button>普通按钮</button>
<button type="primary">主色调按钮</button>
<button type="warn">警告按钮</button>
<!-- size="mini" 小尺寸按钮 -->
<button size="mini">普通按钮</button>
<button type="primary" size="mini">主色调按钮</button>
<button type="warn" size="mini">警告按钮</button>
<!-- plain 镂空按钮 -->
<button size="mini" plain>普通按钮</button>
<button type="primary" size="mini" plain>主色调按钮</button>
<button type="warn" size="mini" plain>警告按钮</button>
效果图:
7.image
- 图片组件
- image组件默认高度约300px、高度约240px
使用效果:
wxml文件:
<!-- image 图片组件 -->
<image></image>
<image src="/images/123.jpg"></image>
wxss文件:
image{
border: 1px solid red;
}
效果图:
例如更改属性mode为aspectFit,自适应的,效果图:
<!-- image 图片组件 -->
<image></image>
<image src="/images/123.jpg" mode="aspectFit"></image>
8.navigator
- 页面导航组件
- 类似于HTML中的a链接