refactor: fixed the problem that the scroll component could not remember the height
This commit is contained in:
zyronon
parent
de415aeafa
commit
d2b532a760
@ -51,7 +51,7 @@ export default {
|
||||
},
|
||||
radius: {
|
||||
type: String,
|
||||
default: '3'
|
||||
default: '6'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
@ -159,9 +159,9 @@ export default {
|
||||
}
|
||||
|
||||
&.white {
|
||||
background: white;
|
||||
background: white !important;
|
||||
color: black;
|
||||
border: 1px solid gainsboro;
|
||||
border: 1px solid gainsboro !important;
|
||||
}
|
||||
|
||||
&.info {
|
||||
|
||||
@ -14,7 +14,7 @@ export default {
|
||||
@import '../assets/less/index';
|
||||
|
||||
.NoMore {
|
||||
font-size: 12rem;
|
||||
font-size: 13rem;
|
||||
height: 60rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@ -1,5 +1,10 @@
|
||||
<template>
|
||||
<Scroll :loading="state.loading" :full-loading="!state.list.length" @pulldown="loadData">
|
||||
<Scroll
|
||||
ref="scroll"
|
||||
:loading="state.loading"
|
||||
:full-loading="!state.list.length"
|
||||
@pulldown="loadData"
|
||||
>
|
||||
<slot :list="state.list"></slot>
|
||||
<NoMore v-if="state.total !== 0 && state.total === state.list.length" />
|
||||
</Scroll>
|
||||
@ -10,6 +15,7 @@ import { onMounted, reactive } from 'vue'
|
||||
import { _notice } from '@/utils'
|
||||
import Scroll from '@/components/Scroll.vue'
|
||||
import NoMore from '@/components/NoMore.vue'
|
||||
import { useScroll } from '@/utils/hooks/useScroll.ts'
|
||||
|
||||
const props = defineProps({
|
||||
api: {
|
||||
@ -19,6 +25,7 @@ const props = defineProps({
|
||||
}
|
||||
}
|
||||
})
|
||||
const scroll = useScroll()
|
||||
|
||||
const state = reactive({
|
||||
list: [],
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="RequestUpdate" id="RequestUpdate">
|
||||
<BaseHeader>
|
||||
<BaseHeader :is-fixed="false">
|
||||
<template v-slot:center>
|
||||
<span class="f16">求更新</span>
|
||||
</template>
|
||||
@ -112,9 +112,13 @@ function toggleRequestUpdate() {
|
||||
overflow: auto;
|
||||
color: white;
|
||||
font-size: 14rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.content {
|
||||
padding: 60rem 15rem 60rem 15rem;
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
padding: 15rem 15rem 60rem 15rem;
|
||||
|
||||
.none {
|
||||
display: flex;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div id="AllMessage">
|
||||
<BaseHeader>
|
||||
<BaseHeader :is-fixed="false">
|
||||
<template v-slot:center>
|
||||
<div class="center" @click="data.isShowType = !data.isShowType">
|
||||
<span class="f16">{{ showTypeText }}</span>
|
||||
@ -43,112 +43,42 @@
|
||||
<div class="mask" @click="data.isShowType = false"></div>
|
||||
</div>
|
||||
</transition>
|
||||
<div class="content">
|
||||
<Loading v-if="data.loading" />
|
||||
<Scroll
|
||||
v-else
|
||||
ref="mainScroll"
|
||||
:use-refresh="true"
|
||||
:loading="data.loadingMore"
|
||||
@refresh="refresh"
|
||||
@pulldown="loadData"
|
||||
>
|
||||
<div class="messages">
|
||||
<div class="message" @click="nav('/message/visitors')">
|
||||
<div class="left">
|
||||
<img
|
||||
v-lazy="_checkImgUrl(store.userinfo.cover_url[0].url_list[0])"
|
||||
alt=""
|
||||
class="avatar"
|
||||
/>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="desc">
|
||||
<div class="top">
|
||||
<div class="name">主页访客</div>
|
||||
</div>
|
||||
<div class="desc-content">4人最近访问了你的主页，看看他们是谁</div>
|
||||
<div class="bottom">
|
||||
<div class="time">01-11</div>
|
||||
</div>
|
||||
</div>
|
||||
<img
|
||||
v-lazy="_checkImgUrl(store.userinfo.cover_url[0].url_list[0])"
|
||||
alt=""
|
||||
class="poster"
|
||||
/>
|
||||
</div>
|
||||
<Scroll ref="mainScroll">
|
||||
<div class="messages">
|
||||
<div
|
||||
class="message"
|
||||
v-for="(item, i) in store.friends.all"
|
||||
:key="i"
|
||||
@click="nav('/message/visitors')"
|
||||
>
|
||||
<div class="left">
|
||||
<img v-lazy="_checkImgUrl(item.avatar)" alt="" class="avatar" />
|
||||
</div>
|
||||
<div class="message" :key="i" v-for="(item, i) in showMessageList" @click="_no">
|
||||
<div class="left">
|
||||
<img v-lazy="_checkImgUrl(item.author.avatar)" alt="" class="avatar" />
|
||||
<img
|
||||
v-if="data.selectShowType === 2"
|
||||
src="@/assets/img/icon/message/love-message.webp"
|
||||
alt=""
|
||||
class="type"
|
||||
/>
|
||||
<img
|
||||
v-if="data.selectShowType === 3"
|
||||
src="@/assets/img/icon/message/call-message.webp"
|
||||
alt=""
|
||||
class="type"
|
||||
/>
|
||||
<img
|
||||
v-if="data.selectShowType === 4"
|
||||
src="@/assets/img/icon/message/comment-message.webp"
|
||||
alt=""
|
||||
class="type"
|
||||
/>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="desc">
|
||||
<div class="top">
|
||||
<div class="name">{{ item.author.nickname }}</div>
|
||||
<div class="tag">朋友</div>
|
||||
</div>
|
||||
<div class="desc-content">
|
||||
<span v-if="data.selectShowType === 1">好好看啊</span>
|
||||
<span v-if="data.selectShowType === 2">赞了你的作品</span>
|
||||
<span v-if="data.selectShowType === 3">@{{ store.userinfo.nickname }}</span>
|
||||
<span v-if="data.selectShowType === 4">好好看啊</span>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<div class="type" v-if="data.selectShowType === 3">在评论中提到了你</div>
|
||||
<div class="type" v-if="data.selectShowType === 4">回复了你的评论</div>
|
||||
<div class="time">01-11</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="desc">
|
||||
<div class="name">{{ item.name }}</div>
|
||||
<div class="bottom">
|
||||
<div class="desc-content">近期访问过你的主页</div>
|
||||
<div class="time">01-11</div>
|
||||
</div>
|
||||
<img
|
||||
v-lazy="_checkImgUrl(item.video + '?vframe/jpg/offset/0/w/300')"
|
||||
alt=""
|
||||
class="poster"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="look-all" v-if="!data.showAll" @click="data.showAll = true">
|
||||
<span>查看全部</span>
|
||||
<dy-back />
|
||||
<img
|
||||
v-lazy="_checkImgUrl(store.userinfo.cover_url[0].url_list[0])"
|
||||
alt=""
|
||||
class="poster"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="title">
|
||||
<span>朋友推荐</span>
|
||||
<img src="@/assets/img/icon/about-gray.png" alt="" />
|
||||
</div>
|
||||
<Peoples v-model:list="data.recommend" :loading="data.loadingMore" mode="recommend" />
|
||||
</Scroll>
|
||||
</div>
|
||||
</div>
|
||||
</Scroll>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import Scroll from '@/components/Scroll.vue'
|
||||
import Loading from '@/components/Loading.vue'
|
||||
import Peoples from '../people/components/Peoples.vue'
|
||||
import resource from '@/assets/data/resource.js'
|
||||
import { useBaseStore } from '@/store/pinia'
|
||||
import { _checkImgUrl, _no, _sleep, cloneDeep } from '@/utils'
|
||||
import { _checkImgUrl } from '@/utils'
|
||||
|
||||
import { computed, onMounted, reactive } from 'vue'
|
||||
import { computed, reactive } from 'vue'
|
||||
import { useNav } from '@/utils/hooks/useNav.js'
|
||||
|
||||
defineOptions({
|
||||
@ -158,20 +88,10 @@ defineOptions({
|
||||
const store = useBaseStore()
|
||||
const nav = useNav()
|
||||
const data = reactive({
|
||||
loading: false,
|
||||
loadingMore: false,
|
||||
isShowType: false,
|
||||
showAll: false,
|
||||
recommend: [],
|
||||
fans: [],
|
||||
messages: [],
|
||||
selectShowType: 1
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
getData()
|
||||
})
|
||||
|
||||
const showTypeText = computed(() => {
|
||||
switch (data.selectShowType) {
|
||||
case 1:
|
||||
@ -187,52 +107,10 @@ const showTypeText = computed(() => {
|
||||
}
|
||||
})
|
||||
|
||||
const showMessageList = computed(() => {
|
||||
if (data.showAll) {
|
||||
return data.messages
|
||||
}
|
||||
return data.messages.slice(0, 2)
|
||||
})
|
||||
|
||||
async function getData() {
|
||||
data.loading = true
|
||||
await _sleep(800)
|
||||
data.loading = false
|
||||
data.recommend = cloneDeep(store.friends.all)
|
||||
data.fans = cloneDeep(store.friends.all)
|
||||
data.recommend.map((v) => {
|
||||
v.type = -1
|
||||
})
|
||||
data.messages = cloneDeep(resource.videos)
|
||||
}
|
||||
|
||||
function toggleShowType(index) {
|
||||
data.selectShowType = index
|
||||
data.isShowType = false
|
||||
}
|
||||
|
||||
// function remove(index) {
|
||||
// _notice('将不会再为你推荐该用户')
|
||||
// data.recommend.splice(index, 1)
|
||||
// }
|
||||
|
||||
async function refresh() {
|
||||
await _sleep(1000)
|
||||
//TODO
|
||||
// data.$refs.mainScroll.refreshEnd()
|
||||
}
|
||||
|
||||
async function loadData() {
|
||||
if (data.loadingMore) return
|
||||
data.loadingMore = true
|
||||
await _sleep(500)
|
||||
data.loadingMore = false
|
||||
let temp = cloneDeep(store.friends.all)
|
||||
temp.map((v) => {
|
||||
v.type = -1
|
||||
})
|
||||
data.recommend = data.recommend.concat(temp)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@ -242,9 +120,12 @@ async function loadData() {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
background: var(--color-message);
|
||||
overflow: auto;
|
||||
color: white;
|
||||
font-size: 14rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.center {
|
||||
display: flex;
|
||||
@ -254,6 +135,7 @@ async function loadData() {
|
||||
width: 15rem;
|
||||
transform: rotate(180deg);
|
||||
transition: all 0.3s;
|
||||
margin-left: 3rem;
|
||||
}
|
||||
|
||||
.show {
|
||||
@ -269,10 +151,12 @@ async function loadData() {
|
||||
margin-top: var(--common-header-height);
|
||||
|
||||
.dialog-content {
|
||||
background: var(--main-bg);
|
||||
border-radius: 0 0 4rem 4rem;
|
||||
background: var(--color-message);
|
||||
overflow: hidden;
|
||||
|
||||
img {
|
||||
width: 16rem;
|
||||
width: 18rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -285,121 +169,82 @@ async function loadData() {
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 0 var(--page-padding);
|
||||
padding-top: var(--common-header-height);
|
||||
.scroll {
|
||||
flex: 1;
|
||||
padding: 0 10rem;
|
||||
}
|
||||
|
||||
.scroll {
|
||||
height: calc(var(--vh, 1vh) * 100 - var(--common-header-height));
|
||||
}
|
||||
|
||||
.messages {
|
||||
.message {
|
||||
margin-bottom: 20rem;
|
||||
display: flex;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 20rem;
|
||||
}
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
.avatar {
|
||||
width: 48rem;
|
||||
height: 48rem;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.type {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 10rem;
|
||||
width: 17rem;
|
||||
padding: 2.5rem;
|
||||
border-radius: 50%;
|
||||
background: black;
|
||||
}
|
||||
|
||||
margin-right: 10rem;
|
||||
}
|
||||
|
||||
.right {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.desc {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
.top {
|
||||
//margin-bottom: 10rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.tag {
|
||||
color: var(--second-text-color);
|
||||
padding: 1rem 4rem;
|
||||
margin-left: 10rem;
|
||||
border-radius: 2rem;
|
||||
background: var(--second-btn-color-tran);
|
||||
font-size: 10rem;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
//margin-top: 10rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 12rem;
|
||||
color: var(--second-text-color);
|
||||
|
||||
.type {
|
||||
margin-right: 10rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.poster {
|
||||
margin-left: 10rem;
|
||||
width: 64rem;
|
||||
height: 64rem;
|
||||
object-fit: cover;
|
||||
border-radius: 3rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.look-all {
|
||||
font-size: 12rem;
|
||||
color: var(--second-text-color);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.close {
|
||||
margin-left: 10rem;
|
||||
transform: rotate(270deg) !important;
|
||||
width: 12rem;
|
||||
height: 12rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-top: 15rem;
|
||||
margin-bottom: 10rem;
|
||||
font-size: 12rem;
|
||||
.messages {
|
||||
.message {
|
||||
margin-bottom: 20rem;
|
||||
display: flex;
|
||||
gap: 10rem;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 20rem;
|
||||
}
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
.avatar {
|
||||
width: 58rem;
|
||||
height: 58rem;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.desc {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 5rem;
|
||||
color: white;
|
||||
font-size: 16rem;
|
||||
|
||||
.bottom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 13rem;
|
||||
color: lightgrey;
|
||||
|
||||
.time {
|
||||
font-size: 12rem;
|
||||
margin-left: 10rem;
|
||||
color: var(--second-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.poster {
|
||||
margin-left: 10rem;
|
||||
width: 58rem;
|
||||
height: 70rem;
|
||||
object-fit: cover;
|
||||
border-radius: 3rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.look-all {
|
||||
font-size: 12rem;
|
||||
color: var(--second-text-color);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
margin-left: 5rem;
|
||||
width: 13rem;
|
||||
.close {
|
||||
margin-left: 10rem;
|
||||
transform: rotate(270deg) !important;
|
||||
width: 12rem;
|
||||
height: 12rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -81,6 +81,7 @@ onMounted(getData)
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
overflow: auto;
|
||||
background: var(--color-message);
|
||||
color: white;
|
||||
font-size: 14rem;
|
||||
|
||||
|
||||
@ -8,9 +8,9 @@
|
||||
</header>
|
||||
|
||||
<Scroll ref="mainScroll">
|
||||
<div class="friends pl1r">
|
||||
<div class="friends">
|
||||
<div
|
||||
class="friend pr1r pl1r"
|
||||
class="friend"
|
||||
@click="nav('/message/chat')"
|
||||
:key="index"
|
||||
v-for="(item, index) in store.friends.all"
|
||||
@ -20,12 +20,13 @@
|
||||
</div>
|
||||
<span>{{ item.name }}</span>
|
||||
</div>
|
||||
<div class="friend pr10p">
|
||||
<img src="../../assets/img/icon/message/setting.png" alt="" />
|
||||
<span class="ml1r">状态设置</span>
|
||||
<div class="friend">
|
||||
<div class="avatar">
|
||||
<img src="../../assets/img/icon/message/setting.png" alt="" />
|
||||
</div>
|
||||
<span>状态设置</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="line mt2r"></div>
|
||||
<div class="messages">
|
||||
<!-- 粉丝-->
|
||||
<div class="message" @click="nav('/message/fans')">
|
||||
@ -54,7 +55,7 @@
|
||||
<div class="name">
|
||||
<span>互动消息</span>
|
||||
</div>
|
||||
<div class="detail">xxx 赞了你的评论</div>
|
||||
<div class="detail">xxx 近期访问过你的主页</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<dy-back class="arrow" mode="gray" img="back" direction="right" />
|
||||
@ -433,11 +434,13 @@ import { useBaseStore } from '@/store/pinia'
|
||||
import { computed, onMounted, reactive, watch } from 'vue'
|
||||
import { useNav } from '@/utils/hooks/useNav.js'
|
||||
import { _checkImgUrl, _sleep, cloneDeep } from '@/utils'
|
||||
import { useScroll } from '@/utils/hooks/useScroll'
|
||||
|
||||
defineOptions({
|
||||
name: 'Message'
|
||||
})
|
||||
|
||||
const mainScroll = useScroll()
|
||||
const store = useBaseStore()
|
||||
const nav = useNav()
|
||||
const data = reactive({
|
||||
@ -521,6 +524,8 @@ async function loadRecommendData() {
|
||||
|
||||
.no-search {
|
||||
height: calc(var(--vh, 1vh) * 100);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
> header {
|
||||
padding: 0 20rem;
|
||||
@ -772,36 +777,48 @@ async function loadRecommendData() {
|
||||
}
|
||||
|
||||
.scroll {
|
||||
height: calc(100% - var(--common-header-height) - var(--footer-height));
|
||||
flex: 1;
|
||||
padding-top: 10rem;
|
||||
padding-bottom: var(--footer-height);
|
||||
}
|
||||
|
||||
.friends {
|
||||
overflow-x: scroll;
|
||||
display: flex;
|
||||
font-size: 14rem;
|
||||
padding: 0 10rem;
|
||||
gap: 20rem;
|
||||
|
||||
.friend {
|
||||
@width: 70rem;
|
||||
width: @width;
|
||||
min-width: @width;
|
||||
|
||||
&:nth-last-child(1) {
|
||||
img {
|
||||
margin: 0 10rem;
|
||||
padding: 17rem;
|
||||
background: var(--second-btn-color-tran);
|
||||
width: 30rem;
|
||||
height: 30rem;
|
||||
.avatar {
|
||||
height: @width;
|
||||
border-radius: 50%;
|
||||
margin-bottom: 6rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--second-btn-color-tran);
|
||||
margin-bottom: 10rem;
|
||||
|
||||
img {
|
||||
width: 35rem;
|
||||
height: 35rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.avatar {
|
||||
position: relative;
|
||||
margin-bottom: 6rem;
|
||||
width: 100%;
|
||||
|
||||
img {
|
||||
@width: 64rem;
|
||||
width: @width;
|
||||
height: @width;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
@ -821,7 +838,7 @@ async function loadRecommendData() {
|
||||
span {
|
||||
width: 64rem;
|
||||
font-size: 12rem;
|
||||
color: lightgray;
|
||||
color: white;
|
||||
display: block;
|
||||
text-align: center;
|
||||
word-break: break-all;
|
||||
@ -833,6 +850,8 @@ async function loadRecommendData() {
|
||||
}
|
||||
|
||||
.messages {
|
||||
margin-top: 20rem;
|
||||
|
||||
.message {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -874,12 +893,12 @@ async function loadRecommendData() {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@padding: 14rem;
|
||||
@padding: 16rem;
|
||||
padding: @padding 0 @padding 0;
|
||||
|
||||
.left {
|
||||
.name {
|
||||
font-size: 14rem;
|
||||
font-size: 16rem;
|
||||
color: white;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
@ -896,7 +915,7 @@ async function loadRecommendData() {
|
||||
|
||||
.detail {
|
||||
color: var(--second-text-color);
|
||||
font-size: 12rem;
|
||||
font-size: 14rem;
|
||||
margin-top: 4rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@ -68,11 +68,13 @@ import { nextTick, onMounted, reactive, watch } from 'vue'
|
||||
import Scroll from '@/components/Scroll.vue'
|
||||
import { useNav } from '@/utils/hooks/useNav.js'
|
||||
import { _no, _sleep } from '@/utils'
|
||||
import { useScroll } from '@/utils/hooks/useScroll'
|
||||
|
||||
defineOptions({
|
||||
name: 'SystemNotice'
|
||||
})
|
||||
|
||||
const mainScroll = useScroll()
|
||||
const nav = useNav()
|
||||
const data = reactive({
|
||||
loading: false,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user