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

超、凢脫俗 2021-09-07 22:02 880阅读 0赞

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

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

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

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BuTx0U9P-1621693887123)(未命名绘图.jpg)\]][img-BuTx0U9P-1621693887123_.jpg]  
**视图容器 view**

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

<table> 
 <thead> 
  <tr> 
   <th align="left">属性</th> 
   <th align="left">类型</th> 
   <th align="left">默认值</th> 
   <th align="left">必填</th> 
   <th align="left">说明</th> 
   <th align="left">最低版本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left"><code>hover-class</code></td> 
   <td align="left"><code>string</code></td> 
   <td align="left">none</td> 
   <td align="left">否</td> 
   <td align="left">指定按下去的样式类。当 <code>hover-class="none"</code> 时，没有点击态效果</td> 
   <td align="left"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.0.0</a></td> 
  </tr> 
  <tr> 
   <td align="left"><code>hover-stop-propagation</code></td> 
   <td align="left"><code>boolean</code></td> 
   <td align="left">false</td> 
   <td align="left">否</td> 
   <td align="left">指定是否阻止本节点的祖先节点出现点击态</td> 
   <td align="left"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.5.0</a></td> 
  </tr> 
  <tr> 
   <td align="left"><code>hover-start-time</code></td> 
   <td align="left"><code>number</code></td> 
   <td align="left">50</td> 
   <td align="left">否</td> 
   <td align="left">按住后多久出现点击态，单位毫秒</td> 
   <td align="left"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.0.0</a></td> 
  </tr> 
  <tr> 
   <td align="left"><code>hover-stay-time</code></td> 
   <td align="left"><code>number</code></td> 
   <td align="left">400</td> 
   <td align="left">否</td> 
   <td align="left">手指松开后点击态保留时间，单位毫秒</td> 
   <td align="left"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.0.0</a></td> 
  </tr> 
 </tbody> 
</table>

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

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

.hc{ 
      border:1px solid red;
    }

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2EhoMGJu-1621693920732)(image-20210520225233329.png)\]][img-2EhoMGJu-1621693920732_image-20210520225233329.png]

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

<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>

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6TbcZEY2-1621693920738)(image-20210520223448059.png)\]][img-6TbcZEY2-1621693920738_image-20210520223448059.png]

扩展视图容器分类：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nhb2xpMjAxMzE0_size_16_color_FFFFFF_t_70]

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

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

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

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4F7pwr63-1621693920745)(image-20210522162224847.png)\]][img-4F7pwr63-1621693920745_image-20210522162224847.png]

## 2，[滑块视图容器 swiper][swiper] ##

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

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-odTVsJ2C-1621693920746)(image-20210522162245707.png)\]][img-odTVsJ2C-1621693920746_image-20210522162245707.png]

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

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

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xygT7Y1t-1621693920747)(image-20210522162355752.png)\]][img-xygT7Y1t-1621693920747_image-20210522162355752.png]

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

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

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

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

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sptMOYwx-1621693920748)(image-20210522162445361.png)\]][img-sptMOYwx-1621693920748_image-20210522162445361.png]

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

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

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

## 6，[页面容器 page-container][page-container] ##

页面容器。

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

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DJaTWTtZ-1621693920750)(image-20210522162723282.png)\]][img-DJaTWTtZ-1621693920750_image-20210522162723282.png]

## 7，[共享元素 share-element][share-element] ##

共享元素。

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

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

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hODrrXPk-1621693920751)(image-20210522162852421.png)\]][img-hODrrXPk-1621693920751_image-20210522162852421.png]

## 8，[规则匹配 match-media][match-media] ##

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

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

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

[Java_]: https://blog.csdn.net/caoli201314/article/details/116643190
[img-BuTx0U9P-1621693887123_.jpg]: /images/20210716/b26b61899b944bf7bbc3ca4892b5b516.png
[img-2EhoMGJu-1621693920732_image-20210520225233329.png]: /images/20210716/c36f5f18865b4008a9fdfcb71cdc237c.png
[Link 1]: https://developers.weixin.qq.com/s/Fr3Wq6mS7ZlE
[img-6TbcZEY2-1621693920738_image-20210520223448059.png]: /images/20210716/6e27c64a848546f4a5a291e92d0b9cce.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nhb2xpMjAxMzE0_size_16_color_FFFFFF_t_70]: /images/20210716/ef3a5a91246644abbfe00fd906878d1c.png
[scroll-view]: https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html
[2.4.0]: https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html
[img-4F7pwr63-1621693920745_image-20210522162224847.png]: /images/20210716/729e2794318d45cabefb8e7ce7fb4a91.png
[swiper]: https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html
[swiper-item]: https://developers.weixin.qq.com/miniprogram/dev/component/swiper-item.html
[img-odTVsJ2C-1621693920746_image-20210522162245707.png]: /images/20210716/27559bf0929e489f82f66449247aac36.png
[movable-view]: https://developers.weixin.qq.com/miniprogram/dev/component/movable-view.html
[movable-area]: https://developers.weixin.qq.com/miniprogram/dev/component/movable-area.html
[img-xygT7Y1t-1621693920747_image-20210522162355752.png]: /images/20210716/b6118fb649b741698a35efd80c9d8131.png
[cover-view]: https://developers.weixin.qq.com/miniprogram/dev/component/cover-view.html
[Link 2]: https://developers.weixin.qq.com/miniprogram/dev/component/native-component.html
[view]: https://developers.weixin.qq.com/miniprogram/dev/component/view.html
[map]: https://developers.weixin.qq.com/miniprogram/dev/component/map.html
[video]: https://developers.weixin.qq.com/miniprogram/dev/component/video.html
[canvas]: https://developers.weixin.qq.com/miniprogram/dev/component/canvas.html
[camera]: https://developers.weixin.qq.com/miniprogram/dev/component/camera.html
[live-player]: https://developers.weixin.qq.com/miniprogram/dev/component/live-player.html
[live-pusher]: https://developers.weixin.qq.com/miniprogram/dev/component/live-pusher.html
[cover-image]: https://developers.weixin.qq.com/miniprogram/dev/component/cover-image.html
[button]: https://developers.weixin.qq.com/miniprogram/dev/component/button.html
[img-sptMOYwx-1621693920748_image-20210522162445361.png]: /images/20210716/163ccc82ed0d46e699bbe59a437af5ca.png
[image]: https://developers.weixin.qq.com/miniprogram/dev/component/image.html
[page-container]: https://developers.weixin.qq.com/miniprogram/dev/component/page-container.html
[img-DJaTWTtZ-1621693920750_image-20210522162723282.png]: /images/20210716/f4abd49bec334a7faafdce1d6e029063.png
[share-element]: https://developers.weixin.qq.com/miniprogram/dev/component/share-element.html
[flutter Hero]: https://flutterchina.club/animations/hero-animations/
[img-hODrrXPk-1621693920751_image-20210522162852421.png]: /images/20210716/0d64d3bec2534e4ca14624d2870f040c.png
[match-media]: https://developers.weixin.qq.com/miniprogram/dev/component/match-media.html