目录
一.常用的视图组件
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链接
转载：https://blog.csdn.net/weixin_53745698/article/details/127215936
查看评论