目录2：基本内容组成部分摘要

前言

开发者可以通过组件来快速搭建页面结构，上一章也介绍了组件，本篇文章牛牛就来给大家介绍一下小程序组件的使用方法。

我们可以将组件看作是内嵌在微信中的标签，它在小程序中的作用和HTML标签是一样的，但组件的功能更加多样和具体。

不用多说，让我们开始吧！

1.视图容器类组件 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; }

视图组件没有默认样式，非常适合用作布局结构，例如网格布局，弹性布局等。

影响：

1.2 视图

一般和事件绑定一起使用，事件是渲染层和逻辑层的沟通，用户在渲染层的行为由逻辑层来响应。

板栗：

wxml文件

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; }

影响：

当然你可以将-y属性改为-x来实现水平滚动

1.3 and-item

轮播示例：

wxml文件

ainer" indicator-dots="true" autoplay="true" circular="true" >

wxss 文件

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

这样我们就实现了轮播了，相比于网页端使用js的复杂操作，这种低代码的实现很舒服，为了提高效率，低代码也是未来的趋势。

影响：

视图容器组件还包括可拖动视图-area、弹出视图-page-，有兴趣的话可以详细了解一下

2. 基本内容组件 2.1.2 富文本

内容描述是富文本，我们可以利用其中的属性将HTML字符串渲染成对应的UI结构。

如下：

效果如下：

总结

这篇关于微信小程序视图容器及基础内容组件的详细图解就到此结束了，更多关于小程序视图容器及内容组件的内容请搜索编程网往期文章或者继续浏览后续相关文章，希望大家以后多多支持编程网！