@toc
前言
<font size="3" color="#8bc8f2" style="行楷">👋👋欢迎来到👋👋🎩魔术之家！！🎩</font>
该文章收录专栏✨--- 2022小程序开发从入门到精通 ---✨
专栏内容✨--- 【小程序 -- 启航篇】一文打通任督二脉 ---✨
书接上文 【小程序 -- 启航篇】一文打通任督二脉 小程序宿主环境构成，上文已介绍了关于宿主环境的通信模式和运行机制，本文着重介绍关于宿主环境的视图容器和基础内容组件
宿主环境 - 组件
小程序中的组件是由宿主环境提供的，开发者可以基于组件快速搭建出漂亮的页面结构。官方把小程序的组件分为了 9 大类，分别是：
视图容器类组件
view 组件
介绍：
普通视图区域（静态）
类似与 HTML 的div标签,是一个块状元素
常用于页面的布局效果<hr>
基本使用实现如图的横向布局：
<!-- 结构 --><view class="container"><view>A</view><view>B</view><view>C</view></view>-----------------------------------我是一条分割线--------------------------------/* 样式 */.container { display: flex; justify-content: space-around;}.container view { width: 100px; height: 100px; text-align: center; line-height: 100px;}/* css3语法 */.container view:nth-child(1) { background-color: lightcoral; }.container view:nth-child(2) { background-color: lightcyan;}.container view:nth-child(3) { background-color: lightgoldenrodyellow;}
复制代码
scroll-view
介绍：
<hr>
注意事项： 滑动效果中对整个区域的高度要小于滑动视图区域的总高度，且要在scroll-view组件中 加上 scroll-y
<!--结构--><scroll-view class="container" scroll-y><view>A</view><view>B</view><view>C</view></scroll-view>------------------------------我是一条分割线---------------------------------------/* 样式 */.container { height: 150px; border: 3px solid black;}.container view { width: 100px; height: 100px; text-align: center; line-height: 100px;}/* css3语法 */.container view:nth-child(1) { background-color: lightcoral; }.container view:nth-child(2) { background-color: lightcyan;}.container view:nth-child(3) { background-color: lightgoldenrodyellow;}
复制代码
注意： 同样需要在 scroll-view 组件中加上 scroll-x ， 最重要的是在样式设置 要加上 white-space: nowrap' 将其设置为 不自动换行，将后面的部分放在区域外
<!--结构--><scroll-view class="container" scroll-x> <view>A</view> <view>B</view> <view>C</view></scroll-view>----------------------------我是分隔符---------------------------------------------/* 样式 */.container { width: 100%; white-space: nowrap;}.container view { display: inline-block; width: 100%; height: 300rpx; text-align: center; line-height: 300rpx;}/* css3语法 */.container view:nth-child(1) { background-color: lightcoral;}.container view:nth-child(2) { background-color: lightcyan;}.container view:nth-child(3) { background-color: lightgoldenrodyellow;}
复制代码
swiper 和 swiper-item
介绍：
可以在在 swiper 组件中加上 一下可选项
🎏indicator-dots : 是否显示面板显示点
🎏indicator-color： 未选中的面板点颜色
🎏indicator-active-color: 选中面板点的颜色
🎏autoplay ： 自动播放
🎏circular： 衔接滑动
🎏duration： 滑动的时间间隔
🎏interval： 自动切换的时间，也就是停留的时间
代码：
<!--结构--><swiper class="container" indicator-dots circular duration="500" interval="1000" indicator-color="white" indicator-active-color="lightblue" autoplay> <swiper-item>A</swiper-item> <swiper-item>B</swiper-item> <swiper-item>C</swiper-item></swiper>------------------------------------我是分割线--------------------------------------/* 样式 */.container { width: 100%;}.container swiper-item { display: inline-block; width: 100%; height: 300rpx; text-align: center; line-height: 300rpx;}/* css3语法 */.container swiper-item:nth-child(1) { background-color: lightcoral;}.container swiper-item:nth-child(2) { background-color: lightcyan;}.container swiper-item:nth-child(3) { background-color: lightgoldenrodyellow;}
复制代码
基础内容组件
text
介绍：
可以通过对 text 组件中加上 user-select设置为可选中
rich-text
富文本标签介绍：
评论