「小程序JAVA实战」小程序视频展示页开发（52）
转自：https://idig8.com/2018/09/22/xiaochengxujavashizhanxiaochengxushipinzhanshiyekaifa51/
这次说下，小程序的视频组件，图标放置 关联到了之前没有说过的一个组件cover-view。https://github.com/limingios/wxProgram.git 中No.15覆盖在原生组件之上的文本视图
- 官网介绍
>https://developers.weixin.qq.com/miniprogram/dev/component/cover-view.html
文章图片
视频上需要添加功能
文章图片
Page({data: {
cover:'cover',
}
})
page {
height: 100%;
background-color: #141414;
}.container {
display: flex;
margin-top: 20rpx;
margin-left: 50rpx;
margin-right: 50rpx;
justify-content: space-between;
}.container-me {
margin-top: 360rpx;
margin-left: 50rpx;
width: 80rpx;
}.container-words {
/* display: flex;
flex-direction: column;
*/
margin-top: 60rpx;
margin-left: 50rpx;
width: 100%;
color: white;
font-size: 14px;
}.inputText {
background-color: gainsboro;
height: 35px;
}.video-desc {
width: 600rpx;
height: 100rpx;
white-space: pre-wrap;
}.container-bottom {
/* bottom: 10px;
*/
display: flex;
margin-top: 60rpx;
margin-left: 50rpx;
margin-right: 50rpx;
/* margin-bottom: 10rpx;
*/
justify-content: space-between;
/* position: fixed;
*/
}.size-me {
width: 70rpx;
height: 70rpx;
}.size-me-bgm {
width: 40rpx;
height: 40rpx;
}.bgm-style {
display: flex;
flex-direction: row;
}.size-bottom {
width: 60rpx;
height: 60rpx;
}.face2 {
width: 75rpx;
height: 75rpx;
border: 0 solid #f00;
border-radius: 100rpx;
background-color: #f10b2e;
}.face {
width: 75rpx;
height: 75rpx;
/* margin: 20rpx;
*/
border-radius: 50%;
}.icoBtn {
flex: 1;
width: 80rpx;
height: 100%;
}.comments-scoll {
height: 1200rpx;
}.comments-all {
/* margin-top: 10px;
*/
margin-bottom: 10px;
/* border-bottom: solid 1px gray;
*/
background-color: #141414;
color: #e8e8e8;
}.face-comments {
width: 60rpx;
height: 60rpx;
border-radius: 50%;
margin-left: 5px;
}.container-comments{
display: flex;
/* margin-top: 20rpx;
margin-left: 50rpx;
margin-right: 50rpx;
justify-content: space-between;
*/}.nickname-comments {
margin-left: 10px;
}.nickname-lbl{
color: #a1a1a1;
}.date-lbl{
color: #a1a1a1;
}.comments-content{
margin-left: 5px;
margin-right: 5px;
/* margin-bottom: 10px;
*/
border-bottom: solid 1px #232323;
background-color: #141414;
}.saySthView {
padding: 10px;
background-color: #141414;
line-height: 45px;
border-bottom: solid 1px #232323;
color: white;
}.saySth {
margin-top: 10px;
margin-left: 10px;
font-size: 18px;
}
文章图片
PS：如果我们把cover-view中的cover去掉的话，我们这个view肯定是无法保存在我们的视频里面的。下面的我们来一起实现里面的功能。
转载于:https://www.cnblogs.com/sharpest/p/10312461.html
推荐阅读
- 一个小故事，我的思考。
- 家乡的那条小河
- 一个人的碎碎念
- 野营记-第五章|野营记-第五章 讨伐梦魇兽
- 昨夜小楼听风
- 2021-02-17|2021-02-17 小儿按摩膻中穴-舒缓咳嗽
- 基于微信小程序带后端ssm接口小区物业管理平台设计
- 2019.4.18感恩日记
- 那件我们忽略的小事叫感恩
- 你有婚内虐待行为吗（）