diff --git a/components/swiperVideo/swiperVideo.js b/components/swiperVideo/swiperVideo.js
index 6e12469..853b0ac 100644
--- a/components/swiperVideo/swiperVideo.js
+++ b/components/swiperVideo/swiperVideo.js
@@ -31,8 +31,9 @@ Component({
* 组件的初始数据
*/
data: {
- controls: false,
- showPlay: false,
+ controls: true,
+ showPlay: true,
+ showFull: false,
isPlay : false,
playId : 0
},
@@ -60,7 +61,6 @@ Component({
videoContextPrev.play()
this.setData({
- isPlay: true,
playId: prevId
})
},
diff --git a/components/swiperVideo/swiperVideo.wxml b/components/swiperVideo/swiperVideo.wxml
index bb9e0a0..ff1b4da 100644
--- a/components/swiperVideo/swiperVideo.wxml
+++ b/components/swiperVideo/swiperVideo.wxml
@@ -8,6 +8,8 @@
controls="{{controls}}"
object-fit="{{fit}}"
show-center-play-btn="{{showPlay}}"
+ show-fullscreen-btn="{{showFull}}"
+ enable-progress-gesture="{{false}}"
data-videoid="{{item.video_id}}"
bindtap="videoPlay"
bindplay="vipdeBindPlay"
@@ -17,5 +19,7 @@
>
+
+
diff --git a/components/swiperVideo/swiperVideo.wxss b/components/swiperVideo/swiperVideo.wxss
index 2da71f0..0b89ea4 100644
--- a/components/swiperVideo/swiperVideo.wxss
+++ b/components/swiperVideo/swiperVideo.wxss
@@ -23,13 +23,14 @@
/* 视频按钮 */
.videoLayer-play{
- position: relative;
+ position: absolute;
width: 78rpx;
height: 78rpx;
left: calc(50% - 39rpx);
top: calc(50% - 39rpx);
opacity: 0;
transition: all .5s;
+ z-index: 99;
}
.videoLayer-play.show{
diff --git a/pages/shortVideo/index.js b/pages/shortVideo/index.js
index b2d465a..769a0e5 100644
--- a/pages/shortVideo/index.js
+++ b/pages/shortVideo/index.js
@@ -5,16 +5,17 @@
*/
Page({
-
/**
* 页面的初始数据
*/
data: {
- videoList : [], //获取短视频列表
- videoIndex : 0, //当前播放视频的下标
- videoId : "", //当前播放的视频id
+ videoList : [], //获取短视频列表
+ videoIndex : 0, //当前播放视频的下标
+ videoId : "", //当前播放的视频id
playState : true, //视频播放状态
rooms : [], //直播列表
+ sysInfo : {}, //系统信息
+ showLive : false //直播层状态
},
/**
@@ -31,17 +32,36 @@ Page({
},
/**
- * 获取直播间列表
+ * 生命周期函数--监听页面显示
*/
onShow(){
+ // 获取直播间列表
wx.$api.live.rooms().then(res=>{
- console.log(res.list)
this.setData({
- rooms: res.list
+ rooms : res.list,
+ sysInfo : wx.getSystemInfoSync().safeArea
})
+ console.log(this.data.sysInfo)
})
},
+ /**
+ * 展示直播数量
+ */
+ onLiveLay(e){
+ if(e.currentTarget.dataset.type == "video"){
+ if(this.data.showLive){
+ this.setData({
+ showLive: false
+ })
+ }
+ }else{
+ this.setData({
+ showLive: !this.data.showLive
+ })
+ }
+ },
+
/***
* 视频的播放状态
*/
diff --git a/pages/shortVideo/index.wxml b/pages/shortVideo/index.wxml
index 32d0160..69872ec 100644
--- a/pages/shortVideo/index.wxml
+++ b/pages/shortVideo/index.wxml
@@ -1,5 +1,14 @@
+
+
+
+
+
+
+
+
-
+
+
-
-
-
-
-
-
-
+
+
+ {{rooms.length}}个直播
-
-
@ {{videoList[videoIndex].company.name || "-"}}
diff --git a/pages/shortVideo/index.wxss b/pages/shortVideo/index.wxss
index 30ae81f..0acb713 100644
--- a/pages/shortVideo/index.wxss
+++ b/pages/shortVideo/index.wxss
@@ -4,9 +4,7 @@
* 匆匆数载恍如梦，岁月迢迢华发增。
* 碌碌无为枉半生，一朝惊醒万事空。
*/
-
-
- page{
+page{
background: #0e0c1a;
}
@@ -17,22 +15,29 @@
}
.videos-content{
+ margin-top: 0;
position: relative;
height: 100vh;
box-sizing: border-box;
padding-bottom: calc(48px + env(safe-area-inset-bottom));
+ transition: margin-top .5s;
+}
+
+.videos-content.marginTop{
+ margin-top: calc(134px + env(safe-area-inset-top));
}
/* 直播信息 */
.live-rooms{
position: absolute;
- top: calc(180rpx + env(safe-area-inset-bottom));
- left: 30rpx;
+ top: 0;
+ padding-top: calc(60px + env(safe-area-inset-top));
+ white-space: nowrap;
}
.live-rooms-cover{
- width: 98rpx;
- height: 98rpx;
+ width: 52px;
+ height: 52px;
border-radius: 50%;
vertical-align: top;
}
@@ -40,13 +45,17 @@
.live-rooms-nav{
position: relative;
display: inline-block;
- width: 98rpx;
- height: 98rpx;
- margin-left: 30rpx;
+ width: 52px;
+ height: 52px;
+ margin: 0 15rpx;
}
.live-rooms-nav:first-child{
- margin-left: 0;
+ margin-left: 30rpx;
+}
+
+.live-rooms-nav:last-child{
+ margin-right: 30rpx;
}
.live-rooms-nav::before,
@@ -56,8 +65,8 @@
}
.live-rooms-nav::before{
- width: 98rpx;
- height: 98rpx;
+ width: 52px;
+ height: 52px;
border:solid 4rpx #FF8C37;
border-radius: 50%;
box-sizing: border-box;
@@ -67,8 +76,8 @@
content: "直播中";
position: absolute;
bottom: 0;
- left: 10rpx;
- width: 78rpx;
+ left: 5px;
+ width: 42px;
background: #FF8C37;
color: white;
height: 32rpx;
@@ -78,10 +87,29 @@
border-radius: 16rpx;
}
+/* 直播数量 */
+.videoLayer-live{
+ position: absolute;
+ top: calc(60px + env(safe-area-inset-top));
+ left: 30rpx;
+ right: 30rpx;
+ color: white;
+ text-align: center;
+}
+
+.videoLayer-live text{
+ background: rgba(0, 0, 0, .5);
+ padding: 0 20rpx;
+ line-height: 50rpx;
+ font-size: 26rpx;
+ border-radius: 25rpx;
+ display: inline-block;
+}
+
/* 视频信息 */
.video-info{
position: absolute;
- bottom: calc(78px + env(safe-area-inset-bottom));
+ bottom: calc(88px + env(safe-area-inset-bottom));
left: 30rpx;
width: calc(100% - 218rpx);
}
@@ -107,7 +135,7 @@
.video-tool{
position: absolute;
right: 30rpx;
- bottom: calc(78px + env(safe-area-inset-bottom));
+ bottom: calc(88px + env(safe-area-inset-bottom));
}
.video-tool-item{