微信小程序（黑马）|【微信小程序】视图容器和基本内容组件前端|小程序|javascript|微信小程

开发者可以通过运用组件快速搭建出页面结构，上一章也有对组件进行介绍，那么本文牛牛就来带大家学习小程序的组件。
我们可以将组件理解为微信内嵌的标签，它在小程序承担的作用与HTML的标签一致，不过组件的功能更加多样、具体。
事不宜迟，让我们开冲！

文章图片

文章目录

- 一，视图容器类组件
- - 1.1 view
  - 1.2 srcoll-view
  - 1.3 swiper和swiper-item
- 二，基本内容组件
- - 2.1 text
  - 2.2 rich-text

一，视图容器类组件 1.1 view

普通视图容器，在微信小程序中，view就相当于HTML中的div标签，属于块级元素
view由于其无意义性，经常用来做小程序大体框架的布局

栗子：
如下实现纵向布局
wxml文件

wxss文件

.column{ margin: 0 auto; width: 100px; } .view-1{ background-color: lightblue; } .view-2{ background-color: lightcoral; } .view-3{ background-color: lightgreen; } .box{ width: 100px; height: 100px; }

view组件没有什么默认的样式，非常适合作为布局结构使用，如网格布局，flex布局等等。
效果：

文章图片

1.2 srcoll-view

相对比于view，scroll-view多了可滚动的功能，scroll-view被称为可滚动的视图区域
一般用来实现小程序的列表滚动功能
常用属性：
1. scroll-x，允许横向滚动
2. scroll-y，允许纵向滚动
3. bindscrolltoupper 滚动到顶部/左边触发
4. bindscrolltolower 滚动到底部/右边触发

bindscrolltoupper和bindscrolltolower一般配合事件绑定一起使用，事件就是渲染层与逻辑层的通信，用户在渲染层产生的行为，逻辑层对该行为进行相应。
栗子：
wxml文件

class="scroll" scroll-y>

wxss文件

.scroll{ width: 100px; height: 120px; } .box{ width: 100px; height: 100px; } .view-1{ background-color: lightgreen; } .view-2{ background-color: lightpink; } .view-3{ background-color: lightskyblue; }

效果：

文章图片

当然你可以将scroll-y属性改为scroll-x，实现横向滚动
1.3 swiper和swiper-item

swiper，滑块视图容器，可以设置滑动播放的元素，需要注意的是，里面只可放置swiper-item标签，否则会导致未定义的行为。
swiper-item，只可放置于swiper，注意，其宽高自动设置为100%。
一般用来设置轮播图
常用属性：
1. indicator-dots 设置是否使用面板指示点，默认为false
2. indicator-color 面板指示点的颜色，默认值为rgba(0,0,0,.3)
3. indicator-color 当前选中的指示点颜色，默认值为#000
4. autoplay 是否自动切换图片，默认为false
5. interval 自动切换的时间间隔，默认为5000ms
6. circular 是否选择衔接滑动，==也就是当滑到最后一张图片，是否允许划动的下一张即回到第一张，默认值为false

轮播图栗子：
wxml文件

class="container" indicator-dots="true" autoplay="true" circular="true" > class="box item-1"> class="box item-2"> class="box item-3">

wxss文件

.container{ height: 200px; } .box{ height: 100%; } .item-1{ background-color: lightgreen; } .item-2{ background-color: lightpink; } .item-3{ background-color: lightgray; }

就这样，我们就实现了轮播图，相比于在网页用JS的复杂操作，这种低代码实现是不是很舒服，为了提高效率，低代码也将是未来的趋势
效果：