小程序 媒体查询match-media和@media、page-container弹出层组件、share-element共享元素页面间穿越动画

1、match-media
	<match-media
		min-width			页面最小宽度(px为单位)	
		max-width			页面最大宽度(px为单位)	
		width			    页面宽度(px为单位)	
		min-height			页面最小高度(px为单位)	
		max-height			页面最大高度(px为单位)	
		height			    页面高度(px为单位)	
		orientation			屏幕方向(landscape或portrait)	
	>
		...
	</match-media>
	
	css中设置媒体查询的方式和web中一致
		@media (min-width: 480px) {
		  .my-class {
		    width: 200px;
		  }
		}
	
2、page-container
	在页面内弹出半屏的弹窗、在页面内加载一个全屏的子页面等,预期为关闭当前弹出的组件,为此提供“假页”容器组件,效果类似于popup弹出层,页面内存在该容器时,当用户进行返回操作,关闭该容器不关闭页面。
	返回操作包括:右滑手势、安卓物理返回键和调用 navigateBack 接口、点击遮罩层
	当前页面最多只有1个容器,若已存在容器的情况下,无法增加新的容器
	
	<page-container
		show			是否显示容器组件	
		duration		动画时长,单位毫秒	
		z-index			z-index层级	
		overlay			是否显示遮罩层	
		position		弹出位置,可选值为top bottom right center	
		round			是否显示圆角	
		close-on-slideDown			是否在下滑一段距离后关闭	
		overlay-style				自定义遮罩层样式	
		custom-style				自定义弹出层样式,如:"background:red;height:50%;width:50%"
		bind:beforeenter			进入前触发	
		bind:enter					进入中触发	
		bind:afterenter				进入后触发	
		bind:beforeleave			离开前触发	
		bind:leave					离开中触发	
		bind:afterleave				离开后触发	
		bind:clickoverlay			点击遮罩层时触发	
	>
		...
	</page-container>

3、share-element
	实现类似元素页面间穿越的动画
	使用时需在当前页放置share-element组件,同时在page-container容器中放置对应的share-element组件,对应关系通过属性值key映射。
	<share-element
		key				映射标记	
		transform		是否进行动画	
		duration		动画时长,单位毫秒	
		easing-function	css缓动函数	
	>
	</share-element>

代码示例:

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

<match-media min-height="400" orientation="landscape">
  <view>当页面高度不小于 400 px 且屏幕方向为纵向时展示这里</view>
</match-media>

share-element示例:

<share-element key='fly' transform>
瓦吉吉哇
</share-element>
<page-container
  show="{{flag}}"
  round
  custom-style="background:red;height:50%;width:50%"
>
<share-element key='fly' transform></share-element>
</page-container>

onLoad() {
  setTimeout(()=>{
    this.setData({
      flag:true
    })
  },3000)
},