粉丝页面加过渡动画

src/assets/less/custom.less

@@ -15,7 +15,7 @@
   transform: translate(-50%, -50%);
   padding: 1rem 1.8rem;
   border-radius: .3rem;
-  font-size: 1.4rem;
+  font-size: 1.2rem;
   white-space: nowrap;
 }
 

src/components/Scroll.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="scroll-wrapper" ref="wrapper" @scroll="scroll">
+  <div class="scroll-wrapper scroll" ref="wrapper" @scroll="scroll">
     <div class="scroll-content">
       <slot></slot>
     </div>

src/pages/message/Fans.vue

@@ -6,44 +6,79 @@
       </template>
     </BaseHeader>
     <div class="content">
-      <People v-for="item in friends.all" :people="item" mode="fans"></People>
-      <div class="line mt1r"></div>
-      <div class="title">
-        <span>朋友推荐</span>
-        <img src="../../assets/img/icon/about-gray.png" alt="">
-
-      </div>
-      <People v-for="item in friends.all" :people="item" mode="recommend"></People>
+      <Scroll @pulldown="loadData">
+        <People v-for="item in friends.all" :people="item" mode="fans"></People>
+        <div class="line mt1r"></div>
+        <div class="title">
+          <span>朋友推荐</span>
+          <img src="../../assets/img/icon/about-gray.png" alt="">
+        </div>
+        <transition-group name="list-complete" tag="div" class="people-wrapper">
+          <People v-for="(item,index) in recommend"
+                  :key="item.id"
+                  :people="item"
+                  @remove="remove(index)"
+                  mode="recommend"/>
+        </transition-group>
+        <Loading :is-full-screen="false" v-if="loading"/>
+      </Scroll>
     </div>
   </div>
 </template>
 <script>
 import {mapState} from "vuex";
 import People from "../people/components/People";
+import Scroll from "../../components/Scroll";
+import Loading from "../../components/Loading";
 
 export default {
   name: "Fans",
   components: {
-    People
-  },
-  props: {
-    modelValue: false
+    Scroll,
+    People,
+    Loading
   },
   data() {
-    return {}
+    return {
+      loading: false,
+      recommend: []
+    }
   },
   computed: {
     ...mapState(['userinfo', 'friends'])
   },
   created() {
+    this.recommend = this.$clone(this.friends.all)
   },
-  methods: {}
+  methods: {
+    remove(index) {
+      this.$notice('将不会再为你推荐该用户')
+      this.recommend.splice(index, 1)
+    },
+    async loadData() {
+      if (this.loading) return
+      this.loading = true
+      await this.$sleep(500)
+      this.loading = false
+      this.recommend = this.recommend.concat(this.friends.all)
+    }
+  }
 }
 </script>
 
 <style scoped lang="less">
 @import "@/assets/less/index";
 
+
+.list-complete-enter-from,
+.list-complete-leave-to {
+  opacity: 0;
+}
+
+.list-complete-leave-active {
+  position: absolute;
+}
+
 .Fans {
   position: fixed;
   left: 0;
@@ -56,7 +91,15 @@ export default {
 
   .content {
     padding: @padding-page;
-    padding-top: 6rem;
+    padding-top: @header-height;
+
+    .scroll {
+      height: calc(100vh - @header-height);
+    }
+
+    .people-wrapper {
+      position: relative;
+    }
 
     .title {
       margin-top: 1.5rem;

src/pages/people/components/People.vue

@@ -1,9 +1,7 @@
 <template>
   <div class="People">
-    <img v-if="people.type === 6" src="../../../assets/img/icon/add-light.png" alt="" class="add">
-    <img v-else :src="$imgPreview(people.avatar)" alt="" class="head-image pull-left">
+    <img :src="$imgPreview(people.avatar)" alt="" class="head-image pull-left">
     <div class="content">
-
       <template v-if="mode === 'fans'">
         <div class="left">
           <div class="name">{{ people.name }}</div>
@@ -44,7 +42,7 @@
           <div class="detail">可能认识的人</div>
         </div>
         <div class="right">
-          <div class="l-button ">移除</div>
+          <div class="l-button" @click="$emit('remove')">移除</div>
           <div class="l-button red">关注</div>
         </div>
       </template>
@@ -122,6 +120,8 @@ export default {
 }
 
 .People {
+  transition: all 0.3s ease;
+  width: 100%;
   height: 7rem;
   display: flex;
   align-items: center;