微信小程序-常用的视图容器类组件

一.组件分类

小程序中的组件也是由宿主环境提供的,开发者可以基于组件快速搭建出漂亮的页面结构。

官方把小程序的组件分为了9大类:

(1) 视图容器

(2) 基础内容

(3) 表单组件

(4)导航组件

(5) 媒体组件

(6) map 地图组件

(7) canvas 画布组件

(8) 开放能力

(9) 无障碍访问

二.常用的视图容器类组件

1.view

普通的视图区域 类似于HTML中的div,是一个块级元素 常用来实现页面的布局效果

实现如图的flex横向布局效果:

XML 复制代码
<!--pages/list/list.wxml-->
<view class="test">
  <view>text1</view>
  <view>text2</view>
  <view>text3</view>
</view>
XML 复制代码
/* pages/list/list.wxss */
.test view {
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}

.test view:nth-child(1) {
  background-color: lightgreen;
}

.test view:nth-child(2) {
  background-color: lightskyblue;
}

.test view:nth-child(3) {
  background-color: lightpink;
}

.test{
  flex-direction: row;
  justify-content: space-around;
}

注意:类名不能单纯的是container,因为container是默认的全局类名,会有冲突,导致编译结果显示不出来(为什么我会知道呢,因为这都是孩子血与泪的教训,摸索一下午不知道哪里错了)

还有就是,不要忘记把list页面置顶,view后面也不要加空格...

2.scroll-view

可滚动的视图区域 常用来实现滚动列表效果

实现如图所示的纵向滚动效果:

XML 复制代码
<!--pages/list/list.wxml-->
<!-- scroll-y属性:允许纵向滚动 -->
<!-- scroll-x属性:允许横向滚动 -->
<!-- 注意:使用竖向滚动时,必须给scroll-view一个固定高度 -->

<scroll-view class="test" scroll-y>
  <view>text1</view>
  <view>text2</view>
  <view>text3</view>
</scroll-view>
XML 复制代码
/* pages/list/list.wxss */
.test view{
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}

.test view:nth-child(1) {
  background-color: lightgreen;
}

.test view:nth-child(2) {
  background-color: lightblue;
}

.test view:nth-child(3) {
  background-color: lightpink;
}

.test{
  border: 1px solid red;
  height: 120px;
  width: 100px;
}

3.swiper和swiper-item

轮播图容器组件和轮播图item组件

swiper组件的常用属性:

实现如图的轮播图效果:

XML 复制代码
<!--pages/list/list.wxml-->
<!-- 轮播图 -->
<!-- indicator-dots属性:显示面板指示点 -->
<swiper class="test" indicator-dots>
<!-- 第一项 -->
<swiper-item>
  <view class="text">text1</view>
</swiper-item>
<!-- 第二项 -->
<swiper-item>
  <view class="text">text2</view>
</swiper-item>
<!-- 第三项 -->
<swiper-item>
  <view class="text">text3</view>
</swiper-item>
</swiper>
XML 复制代码
/* pages/list/list.wxss */
.test {
  height: 150px; /*轮播图容器的高度*/
}

.text {
  height: 100%;
  line-height: 150px;
  text-align: center;
}

swiper-item:nth-child(1){
  background-color: lightpink;
}

swiper-item:nth-child(2){
  background-color: lightcoral;
}

swiper-item:nth-child(3){
  background-color: lightgreen;
}

4.root-portal

使整个子树从页面中脱离出来,类似于在 CSS 中使用 fixed position 的效果。

主要用于制作弹窗、弹出层等。

5.page-container

页面容器。

小程序如果在页面内进行复杂的界面设计(如在页面内弹出半屏的弹窗、在页面内加载一个全屏的子页面等),用户进行返回操作会直接离开当前页面,不符合用户预期,预期应为关闭当前弹出的组件。 为此提供"假页"容器组件,效果类似于popup弹出层,页面内存在该容器时,当用户进行返回操作,关闭该容器不关闭页面。返回操作包括三种情形,右滑手势、安卓物理返回键和调用navigateBack接口

6.movable-view

可移动的视图容器,在页面中可以拖拽滑动.movable-view必须在movable-area组件中,并且必须是直接子节点,否则不能移动

7.movable-area

movable-view的可移动区域

8.match-media

media query 匹配检测节点。可以指定一组 media query 规则,满足时,这个节点才会被展示。

通过这个节点可以实现"页面宽高在某个范围时才展示某个区域"这样的效果。

9.cover-view

覆盖在原生组件之上的文本视图。

例如:

10.cover-image

覆盖在原生组件之上的图片视图。

相关推荐
低代码布道师5 小时前
少儿舞蹈小程序(7)打造您的“活”名片:动态展示机构实力
低代码·小程序
程序员陆通8 小时前
用 Cursor AI 快速开发你的第一个编程小程序
人工智能·小程序
鹧鸪云光伏与储能软件开发8 小时前
投资储能项目能赚多少钱?小程序帮你测算
运维·数据库·小程序·光伏·光伏设计软件·光伏设计
微三云-轩9 小时前
小程序:12亿用户的入口,企业数字化的先锋军
大数据·小程序·开源软件
低代码布道师9 小时前
少儿舞蹈小程序(8)校区信息后台搭建
低代码·小程序
2501_916008899 小时前
iOS 抓包工具有哪些?全面盘点主流工具与功能对比分析
android·ios·小程序·https·uni-app·iphone·webview
2501_915921439 小时前
iOS混淆工具实战 视频流媒体类 App 的版权与播放安全保护
android·ios·小程序·https·uni-app·iphone·webview
—Qeyser13 小时前
好看的背景颜色 uniapp+小程序
小程序·uni-app·uniapp·微信小游戏
2501_9160088913 小时前
uni-app iOS 日志与崩溃分析全流程 多工具协作的实战指南
android·ios·小程序·https·uni-app·iphone·webview
Dark_programmer13 小时前
钉钉小程序 - - - - - 小程序内打开OA文档链接
小程序·钉钉