微信小程序视图容器和基本内容组件

Posted 2023-04-04 前端小刘不怕牛牛

开发者可以通过运用组件快速搭建出页面结构，上一章也有对组件进行介绍，那么本文牛牛就来带大家学习小程序的组件。
我们可以将组件理解为微信内嵌的标签，它在小程序承担的作用与html的标签一致，不过组件的功能更加多样、具体。
事不宜迟，让我们开冲！

文章目录

• • 一，视图容器类组件
  • • 1.1 view
    • 1.2 srcoll-view
    • 1.3 swiper和swiper-item
  • 二，基本内容组件
  • • 2.1 text
    • 2.2 rich-text

一，视图容器类组件

1.1 view

• 普通视图容器，在微信小程序中，view就相当于HTML中的div标签，属于块级元素

• view由于其无意义性，经常用来做小程序大体框架的布局

栗子：

如下实现纵向布局
wxml文件

<view class="column">
  <view class="view-1 box"></view>
  <view class="view-2 box"></view>
  <view class="view-3 box"></view>
</view>

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;

view组件没有什么默认的样式，非常适合作为布局结构使用，如网格布局，flex布局等等。
效果：

1.2 srcoll-view

• 相对比于view，scroll-view多了可滚动的功能，scroll-view被称为可滚动的视图区域
• 一般用来实现小程序的列表滚动功能
• 常用属性：
  1. scroll-x，允许横向滚动
  2. scroll-y，允许纵向滚动
  3. bindscrolltoupper 滚动到顶部/左边触发
  4. bindscrolltolower 滚动到底部/右边触发

bindscrolltoupper和bindscrolltolower一般配合事件绑定一起使用，事件就是渲染层与逻辑层的通信，用户在渲染层产生的行为，逻辑层对该行为进行相应。

栗子：
wxml文件

<scroll-view class="scroll" scroll-y>
  <view class="box view-1"></view>
  <view class="box view-2"></view>
  <view class="box view-3"></view>
</scroll-view>

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;

效果：

当然你可以将scroll-y属性改为scroll-x，实现横向滚动

1.3 swiper和swiper-item

• swiper，滑块视图容器，可以设置滑动播放的元素，需要注意的是，里面只可放置swiper-item标签，否则会导致未定义的行为。
• swiper-item，只可放置于swiper，注意，其宽高自动设置为100%。
• 一般用来设置轮播图
• 常用属性：
  1. indicator-dots 设置是否使用面板指示点，默认为false
  2. indicator-color 面板指示点的颜色，默认值为rgba(0,0,0,.3)
  3. indicator-color 当前选中的指示点颜色，默认值为#000
  4. autoplay 是否自动切换图片，默认为false
  5. interval 自动切换的时间间隔，默认为5000ms
  6. circular 是否选择衔接滑动，==也就是当滑到最后一张图片，是否允许划动的下一张即回到第一张，默认值为false

轮播图栗子：
wxml文件

<swiper class="container" indicator-dots="true" autoplay="true" circular="true" >
<swiper-item class="box item-1">
<view></view>
</swiper-item>
<swiper-item class="box item-2">
<view></view>
</swiper-item>
<swiper-item class="box item-3">
<view></view>
</swiper-item>
</swiper>

wxss文件

.container
  height: 200px;

.box
  height: 100%;

.item-1
  background-color: lightgreen;

.item-2
  background-color: lightpink;

.item-3
  background-color: lightgray;

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

效果：

视图容器组件还有像可拖拽视图movable-area，弹窗视图page-container，感兴趣可以了解一下

---

二，基本内容组件

2.1 text

• 内容描述为承载文本，是一个文本组件，您可以将它看作是小程序的span标签，因为text也是行内元素。
• 常用属性：
  1. user-select ，文本是否可选，如可以进行复制，注意：该属性可使文本组件显示为inline-block

2.2 rich-text

• 内容描述为富文本，我们可以通过其中的nodes属性，把HTML字符串渲染成对应的UI结构
  如下所示：

<rich-text nodes="<h1 style='color: lightblue'>标题</h1>"></rich-text>

效果如下：

文章到这里就结束啦，下一篇的预告是讲解表单组件并做出一个小案例，如果觉得文章对您有用的话可以关注一下牛牛后续的更新呀，感谢您的支持！

债见~

微信小程序View视图容器组件

完整微信小程序(Java后端) 技术贴目录清单页面（必看）

微信小程序框架为开发者提供了一系列完备的UI组件,方便开发者快速构建小程序UI界面。借助这些UI组件开发者可以像搭积木一样快速地拼装出一栋房子的样子,这非常类似于当下建筑行业比较流行的装配式建筑,UI组件就好比预先定制好的建筑构件,只需要按照设计图纸即可快速组装各个组件,便捷迅速地完成界面布局和渲染工作。

下方思维导图是小程序的组件，重点掌握核心组件和重点组件，了解扩展；

视图容器 view

视图容器(View)是小程序框架组件中最常见的基础组件,它的作用跟 HTML中的DIV功能非常相似,用来布局 WXML界面。

属性	类型	默认值	必填	说明	最低版本
hover-class	string	none	否	指定按下去的样式类。当 hover-class="none" 时，没有点击态效果	1.0.0
hover-stop-propagation	boolean	false	否	指定是否阻止本节点的祖先节点出现点击态	1.5.0
hover-start-time	number	50	否	按住后多久出现点击态，单位毫秒	1.0.0
hover-stay-time	number	400	否	手指松开后点击态保留时间，单位毫秒	1.0.0

案例一：设置长按点击效果，以及时间；

<view hover-class="hc" hover-start-time="1000" hover-stay-time="2000">java1234.com Java知识分享网</view>

.hc{
  border:1px solid red;
}

案例二：flex布局 在开发者工具中预览效果

<view class="container">
  <view class="page-body">
    <view class="page-section">
      <view class="page-section-title">
        <text>flex-direction: row\\n横向布局</text>
      </view>
      <view class="page-section-spacing">
        <view class="flex-wrp" style="flex-direction:row;">
          <view class="flex-item demo-text-1"></view>
          <view class="flex-item demo-text-2"></view>
          <view class="flex-item demo-text-3"></view>
        </view>
      </view>
    </view>
    <view class="page-section">
      <view class="page-section-title">
        <text>flex-direction: column\\n纵向布局</text>
      </view>
      <view class="flex-wrp" style="flex-direction:column;">
        <view class="flex-item flex-item-V demo-text-1"></view>
        <view class="flex-item flex-item-V demo-text-2"></view>
        <view class="flex-item flex-item-V demo-text-3"></view>
      </view>
    </view>
  </view>
</view>

扩展视图容器分类：

结合官方文档了解组件作用，用到的时候再结合文档实现具体功能；

1，可滚动视图区域 scroll-view

可滚动视图区域。使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。

2，滑块视图容器 swiper

滑块视图容器。其中只可放置swiper-item组件，否则会导致未定义的行为。

3，可移动视图容器 movable-view

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

4，覆盖在原生组件之上的文本视图 cover-view

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

目前原生组件均已支持同层渲染，建议使用 view 替代。可覆盖的原生组件包括 map、video、canvas、camera、live-player、live-pusher

只支持嵌套 cover-view、cover-image，可在 cover-view 中使用 button。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。

5，覆盖在原生组件之上的图片视图 cover-image

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

目前原生组件均已支持同层渲染，建议使用 image 替代。可覆盖的原生组件同cover-view，支持嵌套在cover-view里。

6，页面容器 page-container

页面容器。

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

7，共享元素 share-element

共享元素。

共享元素是一种动画形式，类似于 flutter Hero动画，表现为元素像是在页面间穿越一样。该组件需与 page-container 组件结合使用。

使用时需在当前页放置 share-element 组件，同时在 page-container 容器中放置对应的 share-element 组件，对应关系通过属性值 key 映射。当设置 page-container 显示时，transform 属性为 true 的共享元素会产生动画。当前页面容器退出时，会产生返回动画。

8，规则匹配 match-media

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

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

微信搜一搜【java1234】关注这个放荡不羁的程序员，关注后回复【资料】有我准备的一线大厂笔试面试资料以及简历模板。