新增列表滚动条位置恢复
parent
bebf1906a2
commit
f7267806df
|
@ -0,0 +1,4 @@
|
|||
# 新增
|
||||
|
||||
- 新增试听列表**滚动条位置恢复**设置(可自动恢复到上次离开时的列表滚动位置),本功能默认开启,若不需要可到设置-列表设置将其关闭
|
||||
|
|
@ -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>')
|
||||
|
|
|
@ -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)
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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: '',
|
||||
|
|
Loading…
Reference in New Issue