开发我的参赛作品页面

components/worksList/index.js

@@ -6,6 +6,7 @@ Component({
       type: Array,
       value: [],
       observer(newVal) {
+        console.log(newVal);
         this.setData({
           worksListCopy: newVal
         })

pages/match/index.js

@@ -1,10 +1,15 @@
-// pages/match/index.js
+import {
+  getSelfRead
+} from '~/api/user'
+import reachBottom from '~/mixins/reachBottom'
 Page({
+  behaviors: [reachBottom],
 
   /**
    * 页面的初始数据
    */
   data: {
+    list: [],
     // true是人气榜，false是参赛作品
     currentType: true,
     bannerList: [{
@@ -26,7 +31,7 @@ Page({
    * 生命周期函数--监听页面加载
    */
   onLoad(options) {
-
+    this.loadMore()
   },
   bannelEvent() {},
   selectType({
@@ -39,6 +44,12 @@ Page({
 
     }
   },
+  loadMore() {
+    this.getData(getSelfRead)
+  },
+  onReachBottom() {
+    this.loadMore()
+  },
   onShareAppMessage() {
 
   }

pages/match/index.json

@@ -1,4 +1,6 @@
 {
-  "usingComponents": {},
+  "usingComponents": {
+    "worksList": "/components/worksList/index"
+  },
   "navigationBarTitleText": "朗读比赛"
 }

pages/match/index.less

@@ -99,7 +99,7 @@
     }
 
     .table {
-      padding: 10rpx 32rpx;
+      padding: 10rpx 32rpx 30rpx;
       box-sizing: border-box;
 
       .titleLine {
@@ -110,7 +110,7 @@
       }
 
       .contentBox {
-        margin-top: 20rpx;
+        margin-top: 22rpx;
         display: flex;
         justify-content: space-between;
         align-items: center;
@@ -178,11 +178,23 @@
             width: 25rpx;
             height: 27rpx;
           }
-          .num{
+
+          .num {
             font-size: 30rpx;
           }
         }
       }
+
+      .selfRank {
+        position: fixed;
+        width: 100%;
+        left: 0rpx;
+        bottom: 0rpx;
+        padding: 14rpx 32rpx;
+        box-sizing: border-box;
+        background-color: white;
+        box-shadow: 0 2rpx 20rpx 0 rgba(0, 0, 0, 0.50);
+      }
     }
   }
 }

pages/match/index.wxml

@@ -23,13 +23,13 @@
       <view class="switchBtn {{currentType?'currentBtn currentBtn-l':''}}" data-type='true'>人气榜TOP100</view>
       <view class="switchBtn {{!currentType?'currentBtn currentBtn-r':''}}" data-type='false'>我的参赛作品</view>
     </view>
-    <view class="table">
+    <view class="table" wx:if="{{currentType}}">
       <view class="titleLine">
         <view class="colTitle">排名</view>
         <view class="colTitle">名称</view>
         <view class="colTitle">人气值</view>
       </view>
-      <view class="contentBox" wx:for="{{10}}" wx:key="index">
+      <view class="contentBox" wx:for="{{20}}" wx:key="index">
         <view class="firstCol">
           <image src="/static/1-1.png" class="rankingImg" wx:if="{{index<3}}" />
           <text wx:else>{{index+1}}</text>
@@ -59,6 +59,36 @@
           <view class="num">{{filters.numFilter(12310)}}</view>
         </view>
       </view>
+      <view class="contentBox selfRank">
+        <view class="firstCol">
+          <image src="/static/1-1.png" class="rankingImg" />
+        </view>
+        <view class="secondCol">
+          <image src="https://p3-passport.byteimg.com/img/mosaic-legacy/3793/3131589739~100x100.awebp" class="avatar" />
+          <view class="userInfo">
+            <view class="nickName">尼赫鲁吧唧布</view>
+            <view class="date">
+              <view>
+                <image src="/static/f.png" class="icon" />
+                <view class="num">333</view>
+              </view>
+              <view>
+                <image src="/static/p.png" class="icon" />
+                <view class="num">999</view>
+              </view>
+              <view>
+                <image src="/static/d.png" class="icon" />
+                <view class="num">666</view>
+              </view>
+            </view>
+          </view>
+        </view>
+        <view class="threeCol">
+          <image src="/static/hot.png" class="icon" />
+          <view class="num">0</view>
+        </view>
+      </view>
     </view>
+    <worksList id="worksList" videoType='my' worksList="{{list}}" />
   </view>
 </view>

pages/match/index.wxss

@@ -85,7 +85,7 @@
   border-top-left-radius: 50rpx;
 }
 .matchBox .rankList .table {
-  padding: 10rpx 32rpx;
+  padding: 10rpx 32rpx 30rpx;
   box-sizing: border-box;
 }
 .matchBox .rankList .table .titleLine {
@@ -95,7 +95,7 @@
   font-size: 36rpx;
 }
 .matchBox .rankList .table .contentBox {
-  margin-top: 20rpx;
+  margin-top: 22rpx;
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -156,3 +156,13 @@
 .matchBox .rankList .table .contentBox .threeCol .num {
   font-size: 30rpx;
 }
+.matchBox .rankList .table .selfRank {
+  position: fixed;
+  width: 100%;
+  left: 0rpx;
+  bottom: 0rpx;
+  padding: 14rpx 32rpx;
+  box-sizing: border-box;
+  background-color: white;
+  box-shadow: 0 2rpx 20rpx 0 rgba(0, 0, 0, 0.5);
+}