新增了短视频组件

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)
+        }
     }
 })

components/videoSwiper/videoSwiper.wxml

@@ -1,2 +1,48 @@
-<!--components/videoSwiper/videoSwiper.wxml-->
-<text>components/videoSwiper/videoSwiper.wxml</text>
+
+<swiper class="videoSwiper" vertical bindchange="changeVideo">
+    <swiper-item class="videoSwiperItem" wx:for="{{videoList}}" wx:key="videoItem">
+        <!-- 视频 -->
+        <video 
+            class="video"
+            id="video{{item.video_id}}"
+            src="{{item.path_url}}"
+            controls="{{controls}}"
+            show-center-play-btn="{{showPlay}}"
+            data-videoid="{{item.video_id}}"
+            bindtap="videoPlay"
+            loop
+        >   
+            <!-- 播放按钮 -->
+            <image class="videoLayer-play" wx:if="{{!isPlay}}" src="/static/icon/play_icon.png" mode="widthFix"></image>
+        </video>
+        <!-- 视频信息 -->
+        <view class="videoInfo">
+            <view class="videoInfoUser">@ 哈尔滨域展科技开发</view>
+            <view class="videoInfoTitle">计算机网络技术服务，软件开发及咨询、技术评测、技术转让服务；</view>
+        </view>
+        <!-- 视频工具栏 -->
+        <view class="videoTool">
+            <view class="videoTool-item">
+                <image class="videoTool-cover" src="/static/img/cover.jpeg" mode="aspectFill"></image>
+            </view>
+            <view class="videoTool-item">
+                <image class="videoTool-icon" src="/static/icon/video_tool_00.png" mode="widthFix"></image>
+                <view class="videoTool-number">12.5w</view>
+            </view>
+            <view class="videoTool-item">
+                <image class="videoTool-icon" src="/static/icon/video_tool_01.png" mode="widthFix"></image>
+                <view class="videoTool-number">1000</view>
+            </view>
+            <view class="videoTool-item">
+                <image class="videoTool-icon" src="/static/icon/video_tool_02.png" mode="widthFix"></image>
+                <view class="videoTool-number">2.9w</view>
+            </view>
+            <view class="videoTool-item">
+                <view class="videoTool-vinyl {{!isPlay ? '' : 'rotate'}}">
+                    <image class="videoTool-vinyl-back" src="/static/img/vinyl_back.png" mode="widthFix"></image>
+                    <image class="videoTool-vinyl-cover" src="/static/img/cover.jpeg" mode="aspectFill"></image>
+                </view>
+            </view>
+        </view>
+    </swiper-item>
+</swiper>

components/videoSwiper/videoSwiper.wxss

@@ -1 +1,136 @@
-/* components/videoSwiper/videoSwiper.wxss */
+
+/**
+ *  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%;
+}

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

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
 }

pages/videos/videos.wxml

@@ -1,6 +1,7 @@
 
-<mp-video-swiper
+<videoSwiper
     video-list="{{videoList}}"
+    play-id="{{showId}}"
     class="videoSwiper"
 >
-</mp-video-swiper>
+</videoSwiper>

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;
 }

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": []