开发”空“状态组件

component/empty/index.js

@@ -0,0 +1,26 @@
+// component/empty/index.js
+Component({
+    /**
+     * 组件的属性列表
+     */
+    properties: {
+        message: {
+            type: String,
+            value: "空空如也..."
+        }
+    },
+
+    /**
+     * 组件的初始数据
+     */
+    data: {
+
+    },
+
+    /**
+     * 组件的方法列表
+     */
+    methods: {
+
+    }
+})

component/empty/index.json

@@ -0,0 +1,4 @@
+{
+    "component": true,
+    "usingComponents": {}
+}

component/empty/index.less

@@ -0,0 +1,19 @@
+.empty {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    .nullImg {
+        margin-top: 250rpx;
+        width: 364rpx;
+        height: 280rpx;
+    }
+
+    .message {
+        margin-top: 30rpx;
+        font-size: 32rpx;
+        font-weight: bold;
+        color: #FFB513;
+    }
+}

component/empty/index.wxml

@@ -0,0 +1,4 @@
+<view class="empty">
+    <image src="/static/image/null.png" class="nullImg" mode="" />
+    <view class="message">{{message}}</view>
+</view>

component/empty/index.wxss

@@ -0,0 +1,17 @@
+.empty {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.empty .nullImg {
+  margin-top: 250rpx;
+  width: 364rpx;
+  height: 280rpx;
+}
+.empty .message {
+  margin-top: 30rpx;
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #FFB513;
+}

pages/userWorks/index.js

@@ -8,7 +8,7 @@ Page({
      * 页面的初始数据
      */
     data: {
-        list: [],
+        list: null,
         currentId: '',
         videoState: true,
         canvasHidden: false, //设置画板的显示与隐藏
@@ -137,7 +137,7 @@ Page({
             })
         })
         return {
-            title: '词儿',
+            title: video.userRead.title,
             path: '/pages/userWorks/index',
             imageUrl: video.userRead.coverImg,
             promise

pages/userWorks/index.json

@@ -1,6 +1,7 @@
 {
     "usingComponents": {
-        "videoPreview": "/component/videoPreview/index"
+        "videoPreview": "/component/videoPreview/index",
+        "emptyBg": "/component/empty/index"
     },
     "enablePullDownRefresh": false
 }

pages/userWorks/index.less

@@ -1,3 +1,3 @@
 .worksBox {
-    // padding-bottom: env(safe-area-inset-bottom);
+
 }

pages/userWorks/index.wxml

@@ -1,9 +1,11 @@
 <view class="worksBox">
     <!-- 作品列表 -->
-    <canvas id='share' type="2d" > </canvas>
-    <block wx:for="{{list}}" wx:key="index">
-        <videoPreview videoInfo="{{item}}" index='{{index}}' currentId="{{currentId}}" data-id="{{item.userRead.id}}"
-            bind:playVideo="playVideo" bind:changStatus="changStatus" bind:getList="getSelfRead">
+    <canvas id='share' type="2d"> </canvas>
+    <block wx:if="{{list.length>0}}">
+        <videoPreview wx:for="{{list}}" wx:key="index" videoInfo="{{item}}" index='{{index}}' currentId="{{currentId}}"
+            data-id="{{item.userRead.id}}" bind:playVideo="playVideo" bind:changStatus="changStatus"
+            bind:getList="getSelfRead">
         </videoPreview>
     </block>
+    <emptyBg wx:if="{{list.length==0}}" message='您还没有作品哦，赶快去发表吧！'></emptyBg>
 </view>