TmOct5/AGuestSaas
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

[更新]更新视频组件配置,调整直播弹出样式

Browse Source
This commit is contained in:
唐明明
2020-12-30 15:13:40 +08:00
parent aa90f73d69
commit e2b2490e1a
6 changed files with 94 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
components/swiperVideo/swiperVideo.js
View File

@@ -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
})
},

4
components/swiperVideo/swiperVideo.wxml
View File

@@ -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 @@
>
</video>
<image class="videoCover" src="{{item.cover}}" mode="aspectFill"></image>
<!-- 视频播放按钮 -->
<!-- <cover-image class="videoLayer-play {{!isPlay ? 'show': ''}}" src="/static/icons/play_icon.png"></cover-image> -->
</swiper-item>
</swiper>

3
components/swiperVideo/swiperVideo.wxss
View File

@@ -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{

34
pages/shortVideo/index.js
View File

@@ -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
})
}
},
/***
* 视频的播放状态
*/

23
pages/shortVideo/index.wxml
View File

@@ -1,5 +1,14 @@
<!-- 直播列表 -->
<scroll-view class="live-rooms" scroll-x>
<block wx:for="{{rooms}}" wx:key="rooms">
<navigator class="live-rooms-nav" url="plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id={{item.roomid}}">
<image class="live-rooms-cover" src="{{item.cover_img}}" mode="aspectFill"></image>
</navigator>
</block>
</scroll-view>
<view class="videos-content">
<!-- 短视频 -->
<view class="videos-content {{showLive ? 'marginTop': ''}}" bindtouchstart="onLiveLay" data-type="video">
<swiperViode
wx:if="{{videoList.length > 0}}"
class="swiper-viode"
@@ -10,16 +19,10 @@
bind:swiperindex="swiperIndex"
>
</swiperViode>
<!-- 直播列表 -->
<view class="live-rooms">
<block wx:for="{{rooms}}" wx:key="rooms">
<navigator class="live-rooms-nav" url="plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id={{item.roomid}}">
<image class="live-rooms-cover" src="{{item.cover_img}}" mode="aspectFill"></image>
</navigator>
</block>
<!-- 直播 -->
<view class="videoLayer-live" wx:if="{{rooms.length > 0 && !showLive}}" catchtap="onLiveLay">
<text>{{rooms.length}}个直播</text>
</view>
<!-- 视频播放按钮 -->
<view class="videoLayer-play {{!isPlay ? 'show': ''}}" src="/static/icons/play_icon.png"></view>
<!-- 视频信息 -->
<view class="video-info">
<view class="video-user">@ {{videoList[videoIndex].company.name || "-"}}</view>

62
pages/shortVideo/index.wxss
View File

@@ -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{