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

一.组件分类

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

官方把小程序的组件分为了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

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

相关推荐
说私域34 分钟前
“开源AI智能名片链动2+1模式S2B2C商城小程序”在直播公屏引流中的应用与效果
人工智能·小程序·开源
!win !2 小时前
uni-app项目支付宝端Input不受控
小程序·uni-app·支付宝小程序
毕设源码-钟学长4 小时前
【开题答辩全过程】以 “旧书驿站”微信小程序的设计与开发为例,包含答辩的问题和答案
微信小程序·小程序
毕设源码-赖学姐21 小时前
【开题答辩全过程】以 “饭否”食材搭配指南小程序的设计与实现为例,包含答辩的问题和答案
小程序
nodcloud1 天前
点可云进销存商城如何部署在微信小程序
微信小程序·小程序
老华带你飞1 天前
畅阅读小程序|畅阅读系统|基于java的畅阅读系统小程序设计与实现(源码+数据库+文档)
java·数据库·vue.js·spring boot·小程序·毕设·畅阅读系统小程序
老华带你飞2 天前
租房平台|租房管理平台小程序系统|基于java的租房系统 设计与实现(源码+数据库+文档)
java·数据库·小程序·vue·论文·毕设·租房系统管理平台
项目題供诗2 天前
微信小程序开发教程(八)
微信小程序·小程序
00后程序员张2 天前
iOS App 混淆与资源保护:iOS配置文件加密、ipa文件安全、代码与多媒体资源防护全流程指南
android·安全·ios·小程序·uni-app·cocoa·iphone
低代码布道师2 天前
少儿舞蹈小程序(12)作品列表查询搭建
低代码·小程序