Hooke / tswj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
103ceb00 1 parent a46a16cf

✨ feat: 滚动恢复调整

Inline Side-by-side
Showing 6 changed files with 77 additions and 184 deletions
......@@ -4,12 +4,14 @@ import { useVideoList } from '@/composables/useVideoList.js'
import { useDefaultPerf } from '@/composables/useDefaultPerf.js'
import { useBookList } from '@/composables/useBookList.js'
import { useShortcutBar } from '@/composables/useShortcutBar.js'
import { useScrollTop } from '@/composables/useScrollTop.js'
export {
useVideoList,
useDefaultPerf,
useBookList,
useShortcutBar
useShortcutBar,
useScrollTop
}
/**
......
import { $, _, storeToRefs, mainStore } from '@/utils/generatePackage'
/**
* 页面滚动恢复
* @returns
*/
export const useScrollTop = () => {
const store = mainStore();
const resetScrollTop = (key) => {
// 嵌套滚动，执行两个，先滚外面再滚里面
_.times(2, () => {
$("html,body").animate({ "scrollTop": String(storeToRefs(store)[key].value) + 'px' });
});
}
return {
resetScrollTop,
store
}
}
......@@ -4,7 +4,8 @@
<div class="info">
<van-row>
<van-col>
<van-image v-if="userInfo.avatar" round width="50" height="50" :src="userInfo.avatar" style="padding-right: 1rem;" />
<van-image v-if="userInfo.avatar" round width="50" height="50" :src="userInfo.avatar"
style="padding-right: 1rem;" />
<van-image v-else round width="50" height="50" :src="icon_avatar" style="padding-right: 1rem;" />
</van-col>
<van-col class="text-wrapper" span="18">
......@@ -51,92 +52,58 @@
<div style="height: 2rem;"></div>
</div>
</div>
<van-empty v-if="emptyStatus"
class="custom-image"
:image="no_image"
description="暂无作品信息"
/>
<van-empty v-if="emptyStatus" class="custom-image" :image="no_image" description="暂无作品信息" />
</template>
<script setup>
import { ref, onActivated, onMounted } from 'vue'
import { useRoute, onBeforeRouteLeave } from 'vue-router'
import { storeToRefs } from 'pinia'
import VideoCard from '@/components/VideoCard/index.vue'
import icon_avatar from '@images/que-touxiang@2x.png'
import no_image from '@images/que-shuju@2x.png'
import { ref, onActivated } from 'vue'
import { useRoute, onBeforeRouteLeave } from 'vue-router'
import axios from '@/utils/axios';
import _ from 'lodash';
import $ from 'jquery'
import { Toast } from 'vant';
import { icon_avatar, no_image } from '@/utils/generateIcons.js'
import { _, Toast } from '@/utils/generatePackage.js'
import { addPages, store } from '@/hooks/useKeepAlive'
import { perfInfoAPI, addFollowAPI } from '@/api/C/perf.js'
import { useScrollTop } from '@/composables';
const { resetScrollTop } = useScrollTop(); // 页面滚动恢复
resetScrollTop('scrollTopPerson');
const $route = useRoute();
const userInfo = ref({});
// 因为不能让空图标提前出来的写法
const emptyStatus = ref(false);
// 获取表演者信息
axios.get('/srv/?a=perf_info', {
params: {
perf_id: $route.query.perf_id
onMounted(async () => {
// 获取表演者信息
const { data } = await perfInfoAPI({ perf_id: $route.query.perf_id });
if (!data.prod.length) {
emptyStatus.value = true;
} else {
_.each(data.prod, (item) => {
item.type = 'read-only' // 特殊标识，判断入口 为keepAlive使用
})
userInfo.value = data;
}
})
.then(res => {
if (res.data.code === 1) {
_.each(res.data.data.prod, (item) => {
item.type = 'read-only' // 特殊标识，判断入口 为keepAlive使用
})
userInfo.value = res.data.data;
if (!res.data.data.prod.length) {
emptyStatus.value = true;
}
} else {
console.warn(res);
if (!res.data.show) return false;
Toast({
icon: 'close',
message: res.data.msg
});
}
})
.catch(err => {
console.error(err);
});
});
// 关注个人用户
const followUser = (status) => {
axios.post('/srv/?a=add_follow', {
perf_id: $route.query.perf_id
})
.then(res => {
if (res.data.code === 1) {
if (res.data.msg === 'add follow OK') {
userInfo.value.is_follow = 1
Toast.success('关注成功')
} else {
userInfo.value.is_follow = 0
Toast.success('取消关注')
}
} else {
console.warn(res);
if (!res.data.show) return false;
Toast({
icon: 'close',
message: res.data.msg
});
}
})
.catch(err => {
console.error(err);
})
const followUser = async () => {
const { msg } = await addFollowAPI({ perf_id: $route.query.perf_id });
if (msg === 'add follow OK') {
userInfo.value.is_follow = 1
Toast.success('关注成功')
} else {
userInfo.value.is_follow = 0
Toast.success('取消关注')
}
};
/****************** keepAlive 模块 *******************/
// TAG: keepAlive 缓存页面
addPages()
const scrollY = ref(0)
onActivated(() => { // keepAlive 重置后执行回调
// TAG: pinia应用，动态刷新数据
......@@ -152,19 +119,8 @@ onActivated(() => { // keepAlive 重置后执行回调
})
// 触发更新
userInfo.value.prod = arr.value;
const { scrollTopPerson } = storeToRefs(store);
// 嵌套滚动，执行两个，先滚外面再滚里面
_.times(2, () => {
$("html,body").animate({ "scrollTop": String(scrollTopPerson.value) + 'px' });
});
});
const { scrollTopPerson } = storeToRefs(store);
// 嵌套滚动，执行两个，先滚外面再滚里面
_.times(2, () => {
$("html,body").animate({ "scrollTop": String(scrollTopPerson.value) + 'px' });
// 滚动恢复
resetScrollTop('scrollTopPerson');
});
onBeforeRouteLeave(() => {
......@@ -175,23 +131,6 @@ onBeforeRouteLeave(() => {
</script>
<script>
export default {
name: 'personIndex',
data() {
return {
}
},
mounted() {
},
methods: {
}
}
</script>
<style lang="less" scoped>
.person-index-page {
.header-wrapper {
......@@ -251,11 +190,12 @@ export default {
.list-title {
padding: 0 1rem;
background-color: #F7F7F7;
.title {
color: #222222;
font-size: 1.1rem;
border-bottom: 2px solid @base-color;
padding: 0.5rem;
color: #222222;
font-size: 1.1rem;
border-bottom: 2px solid @base-color;
padding: 0.5rem;
text-align: center;
}
}
......
......@@ -14,30 +14,21 @@
<script setup>
import VideoCard from '@/components/VideoCard/index.vue'
import Cookies from 'js-cookie'
import no_image from '@images/que-shuju@2x.png'
import { mainStore } from '@/store'
import { storeToRefs } from 'pinia'
import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router'
import { onBeforeRouteLeave } from 'vue-router'
import { ref } from 'vue'
import axios from '@/utils/axios';
import { Toast } from 'vant';
import $ from 'jquery'
import _ from 'lodash'
import { useScrollTop } from '@/composables';
/******************** 返回点击位置 ********************/
const store = mainStore();
const { scrollTopCollection } = storeToRefs(store);
// 嵌套滚动，执行两个，先滚外面再滚里面
_.times(2, () => {
$("html,body").animate({ "scrollTop": String(scrollTopCollection.value) + 'px' });
});
const { resetScrollTop, store } = useScrollTop(); // 页面滚动恢复
resetScrollTop('scrollTopCollection');
onBeforeRouteLeave(() => {
// 监听记录滚动位置
store.changeScrollTopCollection(window.scrollY)
})
/*****************************************************/
});
// 处理书籍下作品列表
const prodList = ref([])
......
......@@ -14,24 +14,17 @@
<script setup>
import VideoCard from '@/components/VideoCard/index.vue'
import Cookies from 'js-cookie'
import no_image from '@images/que-shuju@2x.png'
import { mainStore } from '@/store'
import { storeToRefs } from 'pinia'
import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router'
import { onBeforeRouteLeave } from 'vue-router'
import { ref } from 'vue'
import axios from '@/utils/axios';
import { Toast } from 'vant';
import $ from 'jquery'
import _ from 'lodash'
import { useScrollTop } from '@/composables';
/******************** 返回点击位置 ********************/
const store = mainStore();
const { scrollTopLike } = storeToRefs(store);
// 嵌套滚动，执行两个，先滚外面再滚里面
_.times(2, () => {
$("html,body").animate({ "scrollTop": String(scrollTopLike.value) + 'px' });
});
const { resetScrollTop, store } = useScrollTop(); // 页面滚动恢复
resetScrollTop('scrollTopLike');
onBeforeRouteLeave(() => {
// 监听记录滚动位置
......@@ -67,25 +60,6 @@ axios.get('/srv/?a=my_like')
});
</script>
<script>
import mixin from 'common/mixin';
export default {
mixins: [mixin.init],
data () {
return {
}
},
mounted () {
},
methods: {
}
}
</script>
<style lang="less" scoped>
</style>
......
......@@ -17,23 +17,21 @@
</template>
<script setup>
import { mainStore } from '@/store'
import { storeToRefs } from 'pinia'
import no_image from '@images/que-shuju@2x.png'
import { useUnwatchList } from '@/composables/useUnwatchList.js'
import VideoCard from '@/components/VideoCard/index.vue'
import { ref, onActivated, computed } from 'vue'
import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router'
import { ref, onActivated } from 'vue'
import { onBeforeRouteLeave } from 'vue-router'
import $ from 'jquery'
import _ from 'lodash';
import { addPages, store } from '@/hooks/useKeepAlive'
import { useScrollTop } from '@/composables';
const { onLoad, prod_list, finished, loading, finishedTextStatus, emptyStatus } = useUnwatchList();
const { resetScrollTop } = useScrollTop(); // 页面滚动恢复
resetScrollTop('scrollTop');
/****************** keepAlive 模块 *******************/
// TAG: keepAlive 缓存页面
......@@ -55,18 +53,7 @@ onActivated(() => { // keepAlive 重置后执行回调
// 触发更新
prod_list.value = arr.value;
const { scrollTop } = storeToRefs(store);
// 嵌套滚动，执行两个，先滚外面再滚里面
_.times(2, () => {
$("html,body").animate({ "scrollTop": String(scrollTop.value) + 'px' });
});
});
const { scrollTop } = storeToRefs(store);
// 嵌套滚动，执行两个，先滚外面再滚里面
_.times(2, () => {
$("html,body").animate({ "scrollTop": String(scrollTop.value) + 'px' });
resetScrollTop('scrollTop');
});
onBeforeRouteLeave(() => {
......@@ -78,25 +65,5 @@ onBeforeRouteLeave(() => {
</script>
<script>
import mixin from 'common/mixin';
export default {
name: 'unwatchList',
mixins: [mixin.init],
data() {
return {
}
},
mounted() {
},
methods: {
}
}
</script>
<style lang="less" scoped>
</style>
......