fix: 歌单推荐分页后的滚动交互和其他分页保持一致

sl1673495 · Aug 9, 2019 · 2e7c708 · 2e7c708
1 parent e9c0683
commit 2e7c708
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 31 deletions.
diff --git a/src/layout/menu.vue b/src/layout/menu.vue
@@ -3,37 +3,33 @@
     <user />
     <div class="menu-wrap">
       <div
+        :key="index"
         class="menu-block"
         v-for="(menu, index) in menusWithPlaylist"
-        :key="index"
       >
         <p
           class="menu-block-title"
           v-if="menu.title"
-        >
-          {{menu.title}}
-        </p>
+        >{{menu.title}}</p>
         <ul class="menu-list">
-
           <router-link
-            class="menu-item"
-            active-class="menu-item-active"
-            v-for="(item, index) in menu.children"
-            tag="li"
             :key="index"
             :to="item.to"
+            active-class="menu-item-active"
+            class="menu-item"
+            tag="li"
+            v-for="(item, index) in menu.children"
           >
             <Icon
-              class="iconfont"
-              :type="item.icon"
               :size="16"
+              :type="item.icon"
+              class="iconfont"
             />
             <span class="menu-title">{{item.title}}</span>
           </router-link>
         </ul>
       </div>
     </div>
-
   </div>
 </template>
 
@@ -93,7 +89,7 @@ export default {
 
 <style lang="scss" scoped>
 .menu {
-  width: 200px;
+  width: 220px;
   height: 100%;
   display: flex;
   flex-direction: column;

diff --git a/src/page/playlists/index.vue b/src/page/playlists/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     class="playlists"
-    v-if="playlists.length"
+    ref="playlists"
   >
     <div
       class="top-play-list-card"
@@ -47,14 +47,14 @@
 import { getPlaylists, getTopPlaylists } from '@/api/playlist'
 import PlaylistCard from '@/components/playlist-card'
 import TopPlaylistCard from '@/components/top-playlist-card'
-import { getPageOffset } from '@/utils'
+import { getPageOffset, scrollInto } from '@/utils'
 
 const PAGE_SIZE = 50
 export default {
   async created() {
     this.PAGE_SIZE = PAGE_SIZE
     this.tabs = ['全部', '欧美', '华语', '流行', '说唱', '摇滚', '民谣', '电子', '轻音乐', '影视原声', 'ACG', '怀旧', '治愈', '旅行']
-    this.onPageChange(1)
+    this.initData()
   },
   data() {
     return {
@@ -66,30 +66,35 @@ export default {
     }
   },
   methods: {
-    async getPlaylists(params) {
-      const { playlists, total } = await getPlaylists(params)
-      this.playlists = playlists
-      this.total = total
-    },
-    async getTopPlaylists(params) {
-      const { playlists } = await getTopPlaylists(params)
-      this.topPlaylist = playlists[0] || {}
+    // 获取歌单和精品歌单
+    async initData() {
+      this.getPlaylists()
+      this.getTopPlaylists()
     },
-    onPageChange(page) {
-      this.currentPage = page
-      this.playlists = []
-      this.getPlaylists({
+    async getPlaylists() {
+      const { playlists, total } = await getPlaylists({
         limit: PAGE_SIZE,
-        offset: getPageOffset(page, PAGE_SIZE),
+        offset: getPageOffset(this.currentPage, PAGE_SIZE),
         cat: this.tabs[this.activeTabIndex]
       })
-      this.getTopPlaylists({
+      this.playlists = playlists
+      this.total = total
+    },
+    async getTopPlaylists() {
+      const { playlists } = await getTopPlaylists({
         limit: 1,
         cat: this.tabs[this.activeTabIndex]
       })
+      this.topPlaylist = playlists[0] || {}
+    },
+    // 分页只重新获取歌单
+    async onPageChange(page) {
+      this.currentPage = page
+      this.getPlaylists()
+      scrollInto(this.$refs.playlists)
     },
     onTabChange() {
-      this.onPageChange(1)
+      this.initData()
     }
   },
   components: {