小程序组件
小程序的宿主环境 - 组件
1. 小程序组件分类
小程序中的组件也是由宿主环境提供的开发者可以基于组件快速搭建出漂亮的页面结构。官方把小程序的组件分为了9大类，分别是：
视图容器
基础内容
表单组件
导航组件
媒体组件
map地图组件
canvas画布组件
开放能力
无障碍访问
2. 常用的视图容器类组件
view
普通视图区域
类似于HTML中的div是一个块级元素
常用来实现岩棉的布局效果
csroll-view
可滚动的视图区域
常用来实现滚动列表的效果
swiper和swiper-item
轮播图容器组件 和 轮播图item组件
3. view组件的基本使用
首先介绍两个知识点：
新建小程序页面：在需要在app.json->pages中新增页面的存放路径，小程序开发者工具即可帮我们自动创建对应的页面文件：
修改下项目首页：
只需要调整app.json-》pages数组中页面路径的前后顺序，即可修改项目的首页。小程序会把排在第一位的页面，当做项目首页进行渲染，如图：
那么实现如图的flex横向布局效果：
list.wxml代码：
<view class="container1"> <view>A</view> <view>B</view> <view>C</view> </view>
list.wxss代码
/* pages/list/list.wxss */ .container1 view{ width: 100px; height: 100px; text-align: center; line-height: 100px; } .container1 view:nth-child(1){ background-color: lightgreen; } .container1 view:nth-child(2){ background-color: lightskyblue; } .container1 view:nth-child(3){ background-color: lightpink; } .container1{ display: flex; justify-content: space-around; }
4. scroll-view组件的基本使用
实现如图纵向滚动效果：
list.wxml代码：
<!--pages/list/list.wxml--> <scroll-view class="container1" scroll-y> <view>A</view> <view>B</view> <view>C</view> </scroll-view>
list.wxss代码：
/* pages/list/list.wxss */ .container1 view{ width: 100px; height: 100px; text-align: center; line-height: 100px; } .container1 view:nth-child(1){ background-color: lightgreen; } .container1 view:nth-child(2){ background-color: lightskyblue; } .container1 view:nth-child(3){ background-color: lightpink; } .container1{ border:1px solid red; /* g给 scroll-view 固定高度*/ height: 120px; width: 100px; }
5. swiper和swiper-item组件的基本使用
实现轮播效果图效果：
list.wxml代码：
<!--pages/list/list.wxml--> <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>
list.wxss代码：
/* pages/list/list.wxss */ .swiper-container{ height:150px;/*轮播图容器的高度*/ } .item{ height:100%; line-height: 150px; text-align: center; } swiper-item:nth-child(1) .item { background:lightgreen; } swiper-item:nth-child(2) .item{ background:lightskyblue; } swiper-item:nth-child(3) .item{ background:lightcoral; }
6. swiper组件常用属性
| 属性 | 类型 | 默认值 | 说明 |
| indicator-dots | boolean | false | 是否显示面板指示点 |
| indicator-color | color | rgba(0,0,0,.3) | 指示点颜色 |
| indicator-active-color | color | #000000 | 当前选中的指示点颜色 |
| autoplay | boolean | false | 是否自动切换 |
| interval | number | 5000 | 自动切换时间间隔 |
| current | number | 0 | 当前滑动的索引 |
