Timeline.vue 添加 el-scrollbar

src/views/home/Timeline.vue

@@ -1,38 +1,43 @@
 <template>
-  <div v-if="userInfo !== null">
-    <el-row class="movie-list">
-      <el-col :md="8">
-        <user-avatar-card :user-avatar="userInfo" />
-      </el-col>
-      <el-col :md="12">
-        <el-row>
-          <text-card />
-        </el-row>
-        <el-row>
-          <el-tabs v-model="activeName" @tab-click="tabClick">
-            <el-tab-pane label="视频" name="video">
-              <div v-if="activeName === 'video'">
-                <el-col>
-                  <el-row v-for="(video, index) in dataList" :key="index">
-                    <side-video-card :video="video" />
-                  </el-row>
-                </el-col>
-              </div>
-            </el-tab-pane>
-            <el-tab-pane label="状态" name="status">
-              <div v-if="activeName === 'status'">
-                <el-col :md="15">
-                  <el-row v-for="(status, index) in dataList" :key="index" :md="15" :sm="12" :xs="12">
-                    <status-card :status="status" />
-                  </el-row>
-                </el-col>
-              </div>
-            </el-tab-pane>
-          </el-tabs>
-        </el-row>
-      </el-col>
-    </el-row>
-  </div>
+  <el-row v-if="userInfo !== null" style="height: 80vh;">
+    <el-scrollbar style="width: 100%; height: 100%;">
+      <el-row class="movie-list">
+        <el-col :md="8">
+          <user-avatar-card :user-avatar="userInfo" />
+        </el-col>
+        <el-col :md="8">
+          <el-row>
+            <text-card />
+          </el-row>
+          <el-row>
+            <el-tabs v-model="activeName" @tab-click="tabClick">
+              <el-tab-pane label="视频" name="video">
+                <div v-if="activeName === 'video'">
+                  <el-col>
+                    <el-row v-for="(video, index) in dataList" :key="index">
+                      <side-video-card :video="video" />
+                    </el-row>
+                  </el-col>
+                </div>
+              </el-tab-pane>
+              <el-tab-pane label="状态" name="status">
+                <div v-if="activeName === 'status'">
+                  <el-col :md="15">
+                    <el-row v-for="(status, index) in dataList" :key="index" :md="15" :sm="12" :xs="12">
+                      <status-card :status="status" />
+                    </el-row>
+                  </el-col>
+                </div>
+              </el-tab-pane>
+            </el-tabs>
+          </el-row>
+        </el-col>
+        <el-col :md="8">
+          <user-avatar-card :user-avatar="userInfo" />
+        </el-col>
+      </el-row>
+    </el-scrollbar>
+  </el-row>
 </template>
 
 <script>
@@ -71,9 +76,9 @@ export default {
         document.title = this.userInfo.screenName + '的时间线'
       }
     })
-    /* getMyInfo().then(res => {
-      if (res.code === 0) {
-        this.userInfo = res.data
+    /* getMyInfo().then(resp => {
+      if (resp.code === 0) {
+        this.userInfo = resp.data
         document.title = this.userInfo.screenName + '的时间线'
       }
     })*/
@@ -99,20 +104,18 @@ export default {
       }
     },
     statusTimelineWrapper(nextId) {
-      statusTimeline(nextId).then(res => {
-        if (res.code === 0) {
-          const resData = res.data
-          this.dataList = resData.list
-          this.nextId = resData.nextId
+      statusTimeline(nextId).then(resp => {
+        if (resp.code === 0) {
+          this.dataList = resp.data.list
+          this.nextId = resp.data.nextId
         }
       })
     },
     videoTimelineWrapper(nextId) {
-      videoTimeline(nextId).then(res => {
-        if (res.code === 0) {
-          const resData = res.data
-          this.dataList = resData.list
-          this.nextId = resData.nextId
+      videoTimeline(nextId).then(resp => {
+        if (resp.code === 0) {
+          this.dataList = resp.data.list
+          this.nextId = resp.data.nextId
         }
       })
     }