微信小程序视图容器类组件cover-view使用详解

 时间:2024-10-11 19:39:11

1、先百度搜索查看 cover-view 组件的官方文觇致惯鸹档,从官方文档可以看出,这是一个覆盖在原生组件之上的视图容器组件,可被覆盖的原生组件有:map、video、canvas、camera、live-player、live-pusher 。可通过嵌套 cover-image 实现一个图片覆盖效果。

微信小程序视图容器类组件cover-view使用详解

2、在工程中新建一个 images 子目录,并拷贝两张代表播放与暂停的图标图片到该子目录中,后面 cover-image 标签会使用这两张本地图片。

微信小程序视图容器类组件cover-view使用详解

3、演示通过 cover-view 在原生 v坡纠课柩ideo 组件上覆盖两个图标按钮1. 通过原生video组件在页面创建一个诒仓鋈烧视频对象;2. 在 <video> 标签内部通过 <cover-view> 和 <cover-image> 标签创建多个覆盖组件。

微信小程序视图容器类组件cover-view使用详解

4、在 js 中创建上面 cover-view 上绑定的 play, pause 函数,注意,这个两个函数需要使用页面 video 对象,在 onReady 函数中通过平台提供的接口获取该对象。

微信小程序视图容器类组件cover-view使用详解

5、在 wxss 文件中定义上述各组件所使用的样式。

微信小程序视图容器类组件cover-view使用详解

6、保存编译,在模拟器中可以看到页面效果,符合预期,cover-view 上的动作也能控制视频的播放与暂停。

微信小程序视图容器类组件cover-view使用详解
  • LOL扇子妈技能分析
  • 简简单单做白果方法
  • 如何关注微信公众号?
  • 竣腾JTXZS-V绝缘靴(手套)耐压试验装置说明书
  • css如何从链接上删除下划线
  • 热门搜索
    汉字手抄报五年级 食品安全的手抄报 手抄报花边简单 世界知识产权日手抄报 关于的手抄报图片 预防火灾手抄报 自我保护手抄报 初中手抄报版面设计 防火手抄报资料 日行一善手抄报资料