diff --git a/components/videoSwiper/videoSwiper.js b/components/videoSwiper/videoSwiper.js
index e210bef..5a9613c 100644
--- a/components/videoSwiper/videoSwiper.js
+++ b/components/videoSwiper/videoSwiper.js
@@ -10,20 +10,89 @@ Component({
* 组件的属性列表
*/
properties: {
-
+ videoList: {
+ type : Array,
+ value : []
+ },
+ playId : {
+ type : Number,
+ value : 0
+ }
},
/**
* 组件的初始数据
*/
data: {
-
+ controls: false,
+ showPlay: false,
+ isPlay : true
},
/**
* 组件的方法列表
*/
methods: {
+ // 视频滚动了
+ changeVideo(e){
+ let videoLists = this.data.videoList,
+ current = e.detail.current,
+ currentId = this.data.playId,
+ prevId = videoLists[current].video_id
+
+ // 停止老
+ let videoContextCurrent = wx.createVideoContext("video" + currentId, this)
+ videoContextCurrent.stop()
+ // 播放新
+ let videoContextPrev = wx.createVideoContext("video" + prevId, this)
+ videoContextPrev.play()
+
+ this.setData({
+ isPlay: true,
+ playId: prevId
+ })
+ },
+
+ //视频播放控件
+ videoPlay(e){
+ let videoId = e.currentTarget.dataset.videoid,
+ videoContext = wx.createVideoContext("video" + videoId, this),
+ isPlayState = this.data.isPlay
+
+ if(isPlayState){
+ videoContext.pause()
+ }else{
+ videoContext.play()
+ }
+
+ this.setData({
+ isPlay : !isPlayState
+ })
+
+
+ // let videoId,
+ // priorId = this.data.playId
+
+ // if(e.type == "tap"){
+ // // 点击播放视频
+ // videoId = "video" + e.currentTarget.dataset.videoid
+ // // 实例化video
+ // let videoContext = wx.createVideoContext(videoId)
+ // // 播放视频
+ // videoContext.play()
+
+ // wx.showToast({
+ // title: "播放",
+ // icon : "none"
+ // })
+ // }else{
+ // // 滑动切换视频
+ // videoId = e
+ // }
+
+ // console.log("当前的：", videoId)
+ // console.log("上一个：", priorId)
+ }
}
})
diff --git a/components/videoSwiper/videoSwiper.wxml b/components/videoSwiper/videoSwiper.wxml
index 82286db..b07b246 100644
--- a/components/videoSwiper/videoSwiper.wxml
+++ b/components/videoSwiper/videoSwiper.wxml
@@ -1,2 +1,48 @@
-
-components/videoSwiper/videoSwiper.wxml
+
+
+
+
+
+
+
+ @ 哈尔滨域展科技开发
+ 计算机网络技术服务，软件开发及咨询、技术评测、技术转让服务；
+
+
+
+
+
+
+
+
+ 12.5w
+
+
+
+ 1000
+
+
+
+ 2.9w
+
+
+
+
+
+
+
+
+
+
diff --git a/components/videoSwiper/videoSwiper.wxss b/components/videoSwiper/videoSwiper.wxss
index 3eb7fa2..3ee4c15 100644
--- a/components/videoSwiper/videoSwiper.wxss
+++ b/components/videoSwiper/videoSwiper.wxss
@@ -1 +1,136 @@
-/* components/videoSwiper/videoSwiper.wxss */
\ No newline at end of file
+
+/**
+ * Web唐明明
+ * 一个梦想做木雕手艺人的程序员
+ * explain: videoSwiper
+ */
+
+.videoSwiper{
+ background-color: #0e0c1a;
+ height: 100%;
+ width: 100%;
+}
+
+.videoSwiperItem{
+ position: relative;
+}
+
+.video{
+ z-index: 1;
+ width: 100%;
+ height: 100%;
+}
+
+/* 播放按钮 */
+.videoLayer-play{
+ position: absolute;
+ width: 78rpx;
+ height: 78rpx;
+ opacity: .6;
+ top: calc(50% - 39rpx);
+ left: calc(50% - 39rpx);
+}
+
+/* 视频信息 */
+.videoInfo,
+.videoTool{
+ position: fixed;
+ bottom: 0;
+ z-index: 999;
+}
+
+.videoInfo{
+ left: 0;
+ padding: 0 0 50rpx 30rpx;
+ width: calc(100% - 218rpx);
+ box-sizing: border-box;
+ color: white;
+}
+
+.videoInfoUser{
+ font-weight: bold;
+ font-size: 38rpx;
+}
+
+.videoInfoTitle{
+ padding-top: 10rpx;
+ font-size: 28rpx;
+ line-height: 40rpx;
+}
+
+/* 视频工具栏 */
+.videoTool{
+ right: 0;
+ width: 128rpx;
+ padding: 0 30rpx 50rpx 0;
+ box-sizing: border-box;
+}
+
+.videoTool-item{
+ margin-top: 40rpx;
+ text-align: center;
+}
+
+.videoTool-item:first-child{
+ margin-top: 0;
+}
+
+.videoTool-cover{
+ width: 98rpx;
+ height: 98rpx;
+ border-radius: 50%;
+ vertical-align: top;
+ border:solid 4rpx rgba(255, 255, 255, .2);
+ box-sizing: border-box;
+}
+
+.videoTool-icon{
+ width: 48rpx;
+ vertical-align: top;
+}
+
+.videoTool-number{
+ font-size: 26rpx;
+ line-height: 50rpx;
+ color: white;
+}
+
+/* 黑胶唱片 */
+.videoTool-vinyl{
+ width: 98rpx;
+ height: 98rpx;
+ position: relative;
+}
+
+.videoTool-vinyl.rotate{
+ animation: rotate 10s linear infinite;
+}
+
+@keyframes rotate{
+ 0%{
+ transform: rotate(0deg);
+ }
+ 100%{
+ transform: rotate(360deg);
+ }
+}
+
+.videoTool-vinyl-cover,
+.videoTool-vinyl-back{
+ position: absolute;
+}
+
+.videoTool-vinyl-back{
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+}
+
+.videoTool-vinyl-cover{
+ width: 50%;
+ height: 50%;
+ left: 25%;
+ top: 25%;
+ border-radius: 50%;
+}
\ No newline at end of file
diff --git a/pages/videos/videos.js b/pages/videos/videos.js
index e4689df..7479f44 100644
--- a/pages/videos/videos.js
+++ b/pages/videos/videos.js
@@ -5,7 +5,8 @@ Page({
* 页面的初始数据
*/
data: {
- videoList: [] //获取短视频列表
+ videoList: [], //获取短视频列表
+ showId : 0 //当前播放得id
},
/**
@@ -15,7 +16,8 @@ Page({
wx.$api.video.videos().then(res=>{
console.log(res)
this.setData({
- videoList: res
+ videoList: res,
+ showId : res[0].video_id
})
})
}
diff --git a/pages/videos/videos.json b/pages/videos/videos.json
index ab21bbe..3a435cb 100644
--- a/pages/videos/videos.json
+++ b/pages/videos/videos.json
@@ -1,6 +1,9 @@
{
"usingComponents": {
- "mp-video-swiper": "/components/videoSwiper/videoSwiper"
- }
+ "videoSwiper": "/components/videoSwiper/videoSwiper"
+ },
+ "navigationStyle": "custom",
+ "navigationBarTextStyle": "white",
+ "disableScroll": true
}
diff --git a/pages/videos/videos.wxml b/pages/videos/videos.wxml
index 3921cf3..2037b3c 100644
--- a/pages/videos/videos.wxml
+++ b/pages/videos/videos.wxml
@@ -1,6 +1,7 @@
-
-
+
diff --git a/pages/videos/videos.wxss b/pages/videos/videos.wxss
index 5392fb2..9985056 100644
--- a/pages/videos/videos.wxss
+++ b/pages/videos/videos.wxss
@@ -1,6 +1,16 @@
+/**
+ * Web唐明明
+ * 一个梦想做木雕手艺人的程序员
+ */
+
+page{
+ /* background: #0e0c1a; */
+}
+
.videoSwiper{
width: 100%;
- height: 100vh;
- position: relative;
+ height: 100%;
+ background: #ddd;
+ position: absolute;
}
diff --git a/project.config.json b/project.config.json
index af2e9cd..38f4d8a 100644
--- a/project.config.json
+++ b/project.config.json
@@ -4,7 +4,7 @@
"ignore": []
},
"setting": {
- "urlCheck": false,
+ "urlCheck": true,
"es6": true,
"enhance": false,
"postcss": true,
@@ -40,7 +40,7 @@
},
"compileType": "miniprogram",
"libVersion": "2.14.0",
- "appid": "wxdf57201e20fce566",
+ "appid": "wxd931d03dfe955254",
"projectname": "%E5%88%9B%E5%BB%BA%E4%B8%80%E4%B8%AA%E5%B0%8F%E7%A8%8B%E5%BA%8F",
"debugOptions": {
"hidedInDevtools": []
diff --git a/static/icon/play_icon.png b/static/icon/play_icon.png
new file mode 100644
index 0000000..ffe3900
Binary files /dev/null and b/static/icon/play_icon.png differ
diff --git a/static/icon/video_tool_00.png b/static/icon/video_tool_00.png
new file mode 100644
index 0000000..789576d
Binary files /dev/null and b/static/icon/video_tool_00.png differ
diff --git a/static/icon/video_tool_01.png b/static/icon/video_tool_01.png
new file mode 100644
index 0000000..03098a3
Binary files /dev/null and b/static/icon/video_tool_01.png differ
diff --git a/static/icon/video_tool_02.png b/static/icon/video_tool_02.png
new file mode 100644
index 0000000..2e6c843
Binary files /dev/null and b/static/icon/video_tool_02.png differ
diff --git a/static/img/WechatIMG2367.jpeg b/static/img/WechatIMG2367.jpeg
deleted file mode 100644
index a24fa91..0000000
Binary files a/static/img/WechatIMG2367.jpeg and /dev/null differ
diff --git a/static/img/cover.jpeg b/static/img/cover.jpeg
new file mode 100644
index 0000000..fe972a7
Binary files /dev/null and b/static/img/cover.jpeg differ
diff --git a/static/img/vinyl_back.png b/static/img/vinyl_back.png
new file mode 100644
index 0000000..16388ef
Binary files /dev/null and b/static/img/vinyl_back.png differ