👋👋欢迎来到👋👋 🎩魔术之家!!🎩 该文章收录专栏 ✨— 2022小程序开发从入门到精通 —✨ 专栏内容 ✨— 【小程序 – 启航篇】一文打通任督二脉 —✨
书接上文 【小程序 – 启航篇】一文打通任督二脉 小程序宿主环境构成,上文已介绍了关于宿主环境的通信模式和运行机制,本文着重介绍关于宿主环境的视图容器和基础内容组件
小程序中的组件是由宿主环境提供的,开发者可以基于组件快速搭建出漂亮的页面结构。官方把小程序的组件分为了 9 大类,分别是:
介绍:
div
标签,是一个块状元素基本使用
实现如图的横向布局:
<!-- 结构 -->
<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
组件中 加上 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 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组件中加上 user-select
设置为可选中
富文本标签
介绍:
可以通过nodes节点 将HTML 渲染呈对于UI结构