微信小程序开发学习笔记——2.5movable-area自由移动及match-media相应

>>跟着b站up主“咸虾米_”学习微信小程序开发中，把学习记录存到这方便后续查找。

课程连接：

https://www.bilibili.com/video/BV19G4y1K74d?p=8&vd_source=9b149469177ab5fdc47515e14cf3cf74

一、movable-area和movable-view

1、movable-area

https://developers.weixin.qq.com/miniprogram/dev/component/movable-area.html

2、movable-view

https://developers.weixin.qq.com/miniprogram/dev/component/movable-view.html

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

 后面还有一些事件相关的属性，之后再学监听事件。

3、例子

<!--movable-area 必须设置width和height属性，不设置默认为10px**-->
<movable-area style="width: 400rpx; height: 400rpx; background: #ccc; overflow: hidden;"> 
<!--下面的out-of-bounds允许绿块超过可移动区域，overflow: hidden是为了隐藏超出的部分-->
  <movable-view 
  direction="all"
  inertia
  x="20rpx"
  y="20rpx"
  out-of-bounds
  style="width: 150rpx;height: 150rpx;background: green;">
    <view>
      demo 
    </view>
  </movable-view>
</movable-area>

 隐藏超出部分

初始位置距离边界有20rpx

二、match-media

1、属性

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

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

https://developers.weixin.qq.com/miniprogram/dev/component/match-media.html

2、例子

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

iphone5显示                                                   iphoneX不显示