修改用户名无法删除

src/view/pc/fans.vue

@@ -8,10 +8,6 @@
     <div class="user-rank-list" ref="user-rank-list">
       <RankList title="铁粉榜" @clear="clear" :cityObj="cityObj" listTitle="铁粉数" :rankData="rankData" @rankFans="rankFans"/>
     </div>
-    <div class="force-slide" :style="`right:${$refs['user-rank-list'].offsetWidth+50}px;`" v-if="cityObj" @click="clear">
-      <img src="@/assets/img/fansleft.png" alt="">
-       返回 
-    </div>
   </div>
 </template>
 <script>
@@ -98,29 +94,5 @@ export default {
     top: 40px;
     right: 40px;
   }
-  .force-slide{
-    // padding: 10px;
-    width: 64px;
-    height: 40px;
-    background: #364366;
-    color:#78C1FF;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: absolute;
-    top: 50px;
-    // left: 20px;
-    font-size: 14px;
-    border: 2px solid #5f97d5;
-    cursor: pointer;
-    img{
-      width: 12px;
-      height: 16px;
-    }
-  }
-  // .user-rank-list {
-  //   margin-top: 40px;
-  //   margin-right: 72px;
-  // }
 }
 </style>
\ No newline at end of file

src/view/pc/rankList.vue

 <template>
   <div class="rank-list" ref="rank-list">
+    <div class="force-slide"  v-if="userItem" @click="clear">
+      <img src="@/assets/img/fansleft.png" alt="">
+       返回 
+    </div>
     <div class="title">
       <span>{{ title }}</span>
       <!-- <span class="clear" @click="clear" v-if="cityObj">回退</span> -->
@@ -11,7 +15,7 @@
         <p><span>明星成员</span></p>
         <span>城市</span><span>{{listTitle}}</span>
       </div>
-    <ul class="user-list">
+    <ul class="user-list" ref="user-list">
       <li class="rank-list-nav active" v-for="(item,index) in rankData" :key="index" @click="rankAdd(item)">
         <span class="mar">{{index+1}}</span>
         <p>
@@ -35,6 +39,7 @@ export default {
   methods: {
     clear () {
       this.$emit('clear')
+      this.userItem = null
     },
     rankAdd(item){
       if (this.title == '用户原力榜') {
@@ -44,6 +49,11 @@ export default {
         this.$emit('rankFans',item)
       }
     }
+  },
+   watch: {
+    rankData() {
+      this.$refs['user-list'].scrollTop = 0
+    },
   },
   props: ['title','rankData','city','listTitle','cityObj']
 }
@@ -54,6 +64,28 @@ export default {
   height: 800px;
   display: flex;
   flex-direction: column;
+  position: relative;
+  .force-slide{
+    // padding: 10px;
+    width: 64px;
+    height: 40px;
+    background: #364366;
+    color:#78C1FF;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    top: 10px;
+    right: 410px;
+    // left: 20px;
+    font-size: 14px;
+    border: 2px solid #5f97d5;
+    cursor: pointer;
+    img{
+      width: 12px;
+      height: 16px;
+    }
+  }
   .title {
     display: flex;
     justify-content: space-between;