小程序--组件--视图容器

日常记录学习~~

image.png

1、cover-image和cover-view

参数参考官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/cover-image.html

cover-image：覆盖在原生组件之上的图片视图，支持嵌套在cover-view里

<cover-view>
   <cover-image></cover-image >
</cover-view>

cover-view：覆盖在原生组件之上的文本视图，支持嵌套 cover-view、cover-image，可在cover-view中使用button

 <cover-view >
   <cover-view></cover-view>
</cover-view>

原生组件有：map，video，canvas，camera，live-player，live-pusher

使用场景：
1.视频在全屏的情况下，想要在视频上添加一些文本或图片时，可以使用
2.使用地图时，想要在地图上方添加文本或图片时可使用等等。。。
---这个组件类似于z-index---

2、match-media

参数参考官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/match-media.html

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

<match-media min-width="300" max-width="600">
  <view>当页面宽度在 300 ~ 500 px 之间时展示这里</view>
</match-media>

使用场景：
页面宽高在某个范围时才展示出来
---这个组件类似于@media---

3、movable-area和movable-view

参数参考官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/movable-area.html

movable-area：是movable-view的可移动区域，必须设置width和height属性，不设置默认为10px

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

 <movable-area>
    <movable-view></movable-view>
</movable-area>

使用场景：适用于实现拖拽滑动的需求

4、page-container

参数参考官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/page-container.html

page-container：“假页”容器组件，效果类似于 popup 弹出层，页面内存在该容器时，当用户进行返回操作，关闭该容器不关闭页面，当前页面最多只有 1 个容器，若已存在容器的情况下，无法增加新的容器

5、scroll-view

参数参考官方文档：
https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html

scroll-view：可滚动视图区域，使用竖向滚动时，需要给一个固定高度，组件属性的长度单位默认为px

<scroll-view scroll-y="true" style="height: 300rpx;" >
   <view></view>
</scroll-view>

使用场景：适用于页面数据较多时内容可滚动查看

6、share-element

参数参考官方文档：
https://developers.weixin.qq.com/miniprogram/dev/component/share-element.html
具体使用可看官方案例哦

share-element：共享元素，该组件需与page-container组件结合使用

<page-container>
    <share-element>
      <image />
    </share-element>
</page-container>

7、swiper和swiper-item

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

swiper-item:仅可放置在swiper组件中，宽高自动设置为100%

<swiper>
    <block wx:for="{{xxx}}" wx:key="index">
          <swiper-item>
            <view>{{item}}</view>
          </swiper-item>
    </block>
</swiper>

使用场景：就是左右滑动的情况啦

8、view

这是我们最熟悉的容器啦~