update 直播

src/views/live/teacher/CompleteList.vue

@@ -9,17 +9,19 @@
     <div class="complete-list-top">
       <div class="material-name">{{ material_name }}</div>
       <div class="student-list">
-        <i class="el-icon-arrow-left" />
-        <div class="avatar-list">
-          <el-avatar
-            v-for="item in student_list"
-            :key="item.student_id"
-            size="small"
-            :class="{ active: curStudent === item.student_id }"
-            :src="item.student_image_url"
-          />
+        <i class="el-icon-arrow-left" @click="listMove('left')" />
+        <div ref="avatar" class="avatar-list">
+          <div ref="list" class="avatar-list-wrapper" :style="{ 'margin-left': marginLeft + 'px' }">
+            <el-avatar
+              v-for="item in student_list"
+              :key="item.student_id"
+              size="small"
+              :class="{ active: curStudent === item.student_id }"
+              :src="item.student_image_url"
+            />
+          </div>
         </div>
-        <i class="el-icon-arrow-right" />
+        <i class="el-icon-arrow-right" @click="listMove('right')" />
       </div>
     </div>
 
@@ -86,7 +88,8 @@ export default {
       numPages: 1,
       student_list: [],
       curStudent: '',
-      listTimer: null
+      listTimer: null,
+      marginLeft: 0
     };
   },
   computed: {
@@ -107,6 +110,7 @@ export default {
         this.material_id = '';
         this.material_name = '';
         this.student_list = [];
+        this.marginLeft = 0;
       }
     },
     material_id(newVal) {
@@ -200,6 +204,16 @@ export default {
 
     isImage(type) {
       return ['jpeg', 'gif', 'jpg', 'png', 'bmp', 'pic', 'svg'].includes(type);
+    },
+
+    listMove(direction) {
+      let w = this.$refs.list.clientWidth - this.$refs.avatar.clientWidth;
+      if (w > 40) {
+        let left = Number(this.$refs.list.style['margin-left'].slice(0, -2));
+        let width = direction === 'right' ? left - 40 : left + 40;
+        if (Math.abs(width) > w + 10) width = w;
+        this.marginLeft = width > 0 ? 0 : width;
+      }
     }
   }
 };
@@ -229,10 +243,16 @@ export default {
 
       .avatar-list {
         width: calc(100% - 48px);
+        overflow: hidden;
 
-        .el-avatar {
-          cursor: pointer;
-          margin: 0 8px;
+        &-wrapper {
+          display: inline-block;
+          white-space: nowrap;
+
+          .el-avatar {
+            cursor: pointer;
+            margin: 0 8px;
+          }
         }
       }