目录
一.常用的视图组件
1.view
2.scroll-view
3.swiper和swiper-item
4.text
5.rich-text
6.button
7.image
8.navigator
一.常用的视图组件
1.view
- 普通视图区域
- 类似与HTML中的div，是一个块级元素
- 常用来实现页面的布局效果
wxml文件：
A
B
C
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文件：
A
B
C
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文件：
A B C 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 属性
A B C 效果图：可与上进行对比
文章图片
4.text
- 文本组件
- 类似与HTML中的span标签，是一个行内元素
使用效果：
wxml文件：
手机号支持长按选中保存
18814231000
效果图：
文章图片
5.rich-text
- 富文本组件
- 支持把HTML字符串渲染为WXML结构
wxml文件：
手机号支持长按选中保存
18814231000
效果图：
文章图片
6.button
- 按钮组件
- 功能比HTML中的button按钮丰富
- 通过open-type属性可以调用微信提供的各种功能（客服、转发、获取用户授权等）
wxml文件：
效果图：
文章图片
7.image
- 图片组件
- image组件默认高度约300px、高度约240px
wxml文件：
wxss文件：
image{
border: 1px solid red;
}效果图：
文章图片
文章图片
例如更改属性mode为aspectFit，自适应的，效果图：
文章图片
8.navigator
- 页面导航组件
- 类似于HTML中的a链接
推荐阅读
- 指静脉识别|指静脉代码学习---7.图像增强
- jmeter|Jmeter的学习
- 学习|移动端测试的学习
- Java毕设课设|计算机实战项目之 含论文+辩论PPT+源码等]微信小程序基于微信小程序的校园跑腿+后台管理系统
- 滑模控制|VSC/SMC（十三）——快速和非奇异Terminal滑模控制(含程序模型)
- 学习|本周小结---Mnist数据集和Alexnet网络
- 「微信小程序开发 | 居中布局」
- 「微信小程序开发 | 轮播图」
- 微信小程序|【uni-app】搜索框的防抖处理