新增列表滚动条位置恢复

publish/changeLog.md

@@ -0,0 +1,4 @@
+# 新增
+
+- 新增试听列表**滚动条位置恢复**设置（可自动恢复到上次离开时的列表滚动位置），本功能默认开启，若不需要可到设置-列表设置将其关闭
+

src/renderer/store/mutations.js

@@ -18,6 +18,9 @@ export default {
     if (sortId != null) state.setting.songList.sortId = sortId
     if (source != null) state.setting.songList.source = source
   },
+  setListScroll(state, scrollTop) {
+    state.setting.list.scroll.location = scrollTop
+  },
   setNewVersion(state, val) {
     // val.history.forEach(ver => {
     //   ver.desc = ver.desc.replace(/\n/g, '<br>')

src/renderer/utils/index.js

@@ -44,7 +44,7 @@ export const decodeName = str => str.replace(/'/g, '\'')
 
 export const scrollTo = (element, to, duration = 300, fn = function() {}) => {
   if (!element) return
-  const start = element.scrollTop || element.scrollY
+  const start = element.scrollTop || element.scrollY || 0
   const change = to - start
   const increment = 10
   if (!change) {
@@ -164,7 +164,7 @@ export const isChildren = (parent, children) => {
  * @param {*} setting
  */
 export const updateSetting = setting => {
-  const defaultVersion = '1.0.9'
+  const defaultVersion = '1.0.10'
   const defaultSetting = {
     version: defaultVersion,
     player: {
@@ -175,6 +175,10 @@ export const updateSetting = setting => {
     },
     list: {
       isShowAlbumName: true,
+      scroll: {
+        enable: true,
+        location: 0,
+      },
     },
     download: {
       savePath: path.join(os.homedir(), 'Desktop'),
@@ -281,3 +285,21 @@ export const saveLrc = (filePath, lrc) => {
     if (err) console.log(err)
   })
 }
+
+/**
+ * 生成节流函数
+ * @param {*} fn
+ * @param {*} delay
+ */
+export const throttle = (fn, delay = 100) => {
+  let timer = null
+  let _args = null
+  return function(...args) {
+    _args = args
+    if (timer) return
+    timer = setTimeout(() => {
+      timer = null
+      fn.apply(this, _args)
+    }, delay)
+  }
+}

src/renderer/views/List.vue

@@ -14,7 +14,7 @@
               th.nobreak(style="width: 20%;") 专辑
               th.nobreak(style="width: 20%;") 操作
               th.nobreak(style="width: 10%;") 时长
-      div.scroll(:class="$style.tbody")
+      div.scroll(:class="$style.tbody" @scroll="handleScroll" ref="dom_scrollContent")
         table
           tbody
             tr(v-for='(item, index) in list' :key='item.songmid'
@@ -45,6 +45,7 @@
 
 <script>
 import { mapMutations, mapGetters, mapActions } from 'vuex'
+import { throttle } from '../utils'
 export default {
   name: 'List',
   data() {
@@ -59,6 +60,7 @@ export default {
       isShowEditBtn: false,
       isShowDownloadMultiple: false,
       delayShow: false,
+      routeLeaveLocation: null,
     }
   },
   computed: {
@@ -121,12 +123,33 @@ export default {
   //   this.handleSearch(this.text, this.page)
   // }
   // },
+  beforeRouteLeave(to, from, next) {
+    this.routeLeaveLocation = this.$refs.dom_scrollContent.scrollTop
+    next()
+  },
+  created() {
+    this.handleScroll = throttle(e => {
+      if (this.routeLeaveLocation) {
+        this.setListScroll(this.routeLeaveLocation)
+      } else {
+        this.setListScroll(e.target.scrollTop)
+      }
+    }, 1000)
+  },
   mounted() {
     if (this.list.length > 150) {
-      setTimeout(() => this.delayShow = true, 200)
-    } else this.delayShow = true
+      setTimeout(() => {
+        this.delayShow = true
+        if (this.setting.list.scroll.enable && this.setting.list.scroll.location) {
+          this.$nextTick(() => this.$refs.dom_scrollContent.scrollTo(0, this.setting.list.scroll.location))
+        }
+      }, 200)
+    } else {
+      this.delayShow = true
+    }
   },
   methods: {
+    ...mapMutations(['setListScroll']),
     ...mapMutations('list', ['defaultListRemove', 'defaultListRemoveMultiple']),
     ...mapActions('download', ['createDownload', 'createDownloadMultiple']),
     ...mapMutations('player', ['setList']),
@@ -197,6 +220,9 @@ export default {
           break
       }
     },
+    // handleScroll(e) {
+    //   console.log(e.target.scrollTop)
+    // },
   },
 }
 </script>

src/renderer/views/Setting.vue

@@ -35,6 +35,15 @@ div.scroll(:class="$style.setting")
       h3 任务栏播放进度条
       div
         material-checkbox(id="setting_player_showTaskProgess" v-model="current_setting.player.isShowTaskProgess" label="是否启用")
+    dt 列表设置
+    dd(title='是否恢复播放列表滚动条位置')
+      h3 恢复列表滚动位置（仅对我的音乐分类有效）
+      div
+        material-checkbox(id="setting_list_scroll_enable" v-model="current_setting.list.scroll.enable" label="是否启用")
+    //- dd(title='播放列表是否显示专辑栏')
+      h3 专辑栏
+      div
+        material-checkbox(id="setting_list_showalbum" v-model="current_setting.list.isShowAlbumName" label="是否显示专辑栏")
     dt 下载设置
     dd(title='下载歌曲保存的路径')
       h3 下载路径
@@ -57,11 +66,6 @@ div.scroll(:class="$style.setting")
       h3 歌词下载
       div
         material-checkbox(id="setting_download_isDownloadLrc" v-model="current_setting.download.isDownloadLrc" label="是否启用")
-    //- dt 列表设置
-    //- dd(title='播放列表是否显示专辑栏')
-      h3 专辑栏
-      div
-        material-checkbox(id="setting_list_showalbum" v-model="current_setting.list.isShowAlbumName" label="是否显示专辑栏")
     dt 网络设置
     dd
       h3 代理设置（歌曲下载暂不支持代理）
@@ -174,6 +178,10 @@ export default {
         },
         list: {
           isShowAlbumName: true,
+          scroll: {
+            enable: true,
+            location: 0,
+          },
         },
         download: {
           savePath: '',