图片加载后何时触发滚动
When to trigger a scroll after images load
使用 Quasar 框架我有多个 children 并且需要在加载页面后滚动到某个 child。我可以通过使用 setTimeout 设置延迟来实现，但我更喜欢 better/fail-proof 解决方案。
我目前的方法是等待所有 children 挂载（并使用 nextTick）并认为它应该准备好滚动，但 apparent 可能不会。或者我可以等待加载所有图像（因为 QImg 有一个 @load event），但这真的很晚，因为手动我已经可以在图像框已经存在时触发滚动呈现但仍在加载。
在 'the earliest possible moment' 触发的最佳方式是什么？
Point-panel (parent):
new Vue({
el: '#q-app',
template: `
<div id="point-panel" class="map-overlay column scroll">
<small-cards
@hook:mounted="cardsAreReady(cardIndex, picArray.length)"
v-for="(point, cardIndex) in picArray"
:key="cardIndex"
:point-object="point"
:card-index="cardIndex"
/>
<q-btn
@click.native="scrollToCenter"
fab
ripple
class="fixed"
size="10px"
color="black"
label="scroll"
style="right: 18px; bottom: 120px"
/>
</div>
`,
data: function () {
return {
selectedPointIndex: 6,
picArray: ['https://image1', 'https://image2', 'https://image_etc.']
}
},
methods: {
notify (msg) {
this.$q.notify(msg)
},
cardsAreReady (cardIndex, total) {
console.log('one ready.......', `${cardIndex} ...and total ${total}`)
const that = this
if (cardIndex + 1 === total) {
console.log('....all cards MOUNTED!', cardIndex)
setTimeout(() => {
that.$nextTick(() => {
console.log('..........trigger scroll NOW!')
that.scrollToCenter()
})
}, 0)
}
},
scrollToCenter () {
const that = this
console.log('..........cardIndex: ', that.selectedPointIndex)
that.notify('scroll triggered!')
function scrollFunction () {
const element = document.getElementsByClassName(
that.selectedPointIndex.toString()
)
const target = document.getElementById('point-panel')
const iW = window.innerWidth
const iH = window.innerHeight
const myOffset = element[0].offsetLeft
Quasar.utils.scroll.setHorizontalScrollPosition(target, myOffset, 0)
}
setTimeout(() => scrollFunction(), 0)
}
}
})
Images/small-cards (child仁):
Vue.component('small-cards', {
props: {
pointObject: {
type: Object,
required: true
},
cardIndex: {
type: Number,
required: true,
default: 0
}
},
data: function () {
return {
selectedPointIndex: 6
}
},
methods: {
reportError (event) {
console.log(`${event.name}: ${event.message}`)
},
},
template: `
<div
class="mycard"
:class="{
'active': cardIndex === selectedPointIndex,
[cardIndex]: true
}"
>
<q-img
:src="pointObject"
spinner-size="30px"
style="background-color: rgba(255, 225, 215, 0.4)"
@error="reportError"
/>
</div>
`
})
在这里您可以找到显示问题的 jsfiddle。我添加了一个滚动按钮，显示加载后可以成功触发滚动（第6张图，即'the Tiger'滚动到bottom-left角）。
编辑：给问题更多的方向：问题是如果 scroll 很快被触发， DOM 还没有渲染，因此滚动的距离还不能确定.但我会认为之后
mountDom应该确定了吧？！那么，为什么当前的方法不起作用？
EDIT/NEW 答案：
我终于能够让它工作了......这是我必须做的修复它的方法：
- ~EDIT~ 添加
$nextTick （按照 OP 的建议）使这更加一致！ OP 也能够在没有包装器组件的情况下工作
small-cards 组件现在 emits 图像加载完成时的事件 - 为名为
small-cards-wrapper 的 small-cards 组件创建了一个 "wrapper"
- 这个 "wrapper" 有 2 个
props：1) items，图像源数组 2) scrollToIndex，你想滚动到的索引号mount
small-cards-wrapper 组件将接收发出的事件（来自 small-cards 组件[s]）并检查它是否是您要滚动到的索引 - 如果是，我们滚动到它.. - 本质上，我们在尝试滚动到图像之前等待图像加载..
我相信您在查看代码后能够看到我所做的更改，但如果您有任何问题，请告诉我！
[NEWEST JSFiddle (with $nextTick)]
原始答案：
我在 mount 期间触发了 scrollToCenter() 方法，并从模板中删除了 hook.mounted 逻辑..
我已经对代码中所做的上述更改进行了评论，因此您可以准确地看到我所做的。
如果您不希望滚动在装载后 2 秒发生，您可以删除 setTimeout - 这样做是为了显示它在加载后如何滚动（让您有时间看到它发生）。
这是您要找的吗？
Vue.component('small-cards', {
props: {
pointObject: {
type: Object,
required: true
},
cardIndex: {
type: Number,
required: true,
default: 0
},
},
data: function() {
return {
selectedPointIndex: 6
}
},
methods: {
reportError(event) {
console.log(`${event.name}: ${event.message}`);
},
handleLoad() {
this.$emit('loaded-card', true);
}
},
template: `
<div class="mycard" :class="{[cardIndex]: true}">
<q-img :src="pointObject"
@load="handleLoad"
spinner-size="30px"
style="background-color: rgba(255, 225, 215, 0.4)"
@error="reportError">
</q-img>
</div>
`
});
Vue.component('small-cards-wrapper', {
props: {
items: {
type: Array,
required: true,
},
scrollToIndex: {
type: Number,
required: false
}
},
methods: {
isLoaded(x) {
if (Number(x) === Number(this.scrollToIndex)) {
this.$nextTick(() => {
const element = document.getElementsByClassName(x.toString())
const target = document.getElementById('point-panel')
const iW = window.innerWidth
const iH = window.innerHeight
const myOffset = element[0].offsetLeft
Quasar.utils.scroll.setHorizontalScrollPosition(target, myOffset, 0)
this.$q.notify("Scroll Triggered!");
})
}
}
},
template: `
<div id="point-panel" class='map-overlay column scroll'>
<small-cards
v-for='(point, cardIndex) in items'
:key="cardIndex"
:point-object="point"
:card-index="cardIndex"
@loaded-card="isLoaded(cardIndex)"
></small-cards>
</div>
`
})
new Vue({
el: '#q-app',
data: function() {
return {
selectedPointIndex: 6,
picArray: ["https://images.takeshape.io/86ce9525-f5f2-4e97-81ba-54e8ce933da7/dev/144069dc-7390-4022-aa0f-abba022d3a2f/spec.jpg?auto=compress%2Cformat", "https://natureconservancy-h.assetsadobe.com/is/image/content/dam/tnc/nature/en/photos/prescribed_burn_oregon.jpg?crop=0,120,5760,3600&wid=1640&hei=1025&scl=3.5121951219512195", "https://orig11.deviantart.net/1062/f/2015/315/9/6/abstract__7_by_thejsyve1-d9gciwk.jpg", "https://natureconservancy-h.assetsadobe.com/is/image/content/dam/tnc/nature/en/photos/Brown_County_Hills_Leonetti.jpg?crop=33,0,1192,656&wid=4000&hei=2200&scl=0.29818181818181816", "https://www.telegraph.co.uk/content/dam/Travel/galleries/travel/destinations/northamerica/usa/US%20national%20parks/AP84847745_Yosemite_General-xlarge.jpg", "https://dehayf5mhw1h7.cloudfront.net/wp-content/uploads/sites/183/2016/09/15173325/Brown_County_Indiana_Estados_Unidos_2012-10-14_DD_10.jpg", "https://s-media-cache-ak0.pinimg.com/originals/19/e9/58/19e9581dbdc756a2dbbb38ae39a3419c.jpg", "https://cdn.pixabay.com/photo/2015/12/01/20/28/green-1072828_960_720.jpg", "https://www.alwareness.org/wp-content/uploads/2018/10/Bomen-Bos.jpg", "https://www.campz.be/info/wp-content/uploads/header-pic-mountain.jpeg", "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSUzRyiSPfzeIogLgkY1P8ugrvzls23SMhOcJi7vmUfCe4r1nKa", "https://upload.wikimedia.org/wikipedia/commons/f/ff/Pizigani_1367_Chart_10MB.jpg", "https://farm6.staticflickr.com/5720/22076039308_4e2fc21c5f_o.jpg"]
}
},
template: `
<div>
<h4>Scroll now occurs on 'mount'</h4>
<small-cards-wrapper
:items="picArray"
:scroll-to-index="selectedPointIndex"
></small-cards-wrapper>
</div>
`,
})
body {
position: absolute;
z-index: 0;
top: 0;
bottom: 0;
right: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
margin: 0;
padding: 0;
min-width: 100px;
min-height: 100vh;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.map-overlay {
flex-flow: row nowrap;
justify-content: flex-start;
width: 100vw;
height: 30vh;
bottom: 0;
left: 0;
margin: 0;
overflow-x: scroll;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
display: flex;
position: fixed;
background-color: rgba(255, 150, 150, 0.3);
font: 'Abel', 'Helvetica Neue', Arial, Helvetica, sans-serif;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
color: #8e3433;
}
.scroll {
overflow: auto;
}
.column {
flex-direction: column;
}
.row,
.column,
.flex {
display: flex;
flex-wrap: wrap;
}
div {
display: block;
}
html,
body,
#q-app {
width: 100%;
direction: ltr;
}
.mycard {
flex: 1 1 auto;
min-width: 47vw;
margin: 3px 0 9px 2vw;
justify-content: flex-end;
border-radius: 2px;
display: flex;
}
<script src="https://unpkg.com/vue@2.6.10/dist/vue.min.js"></script>
<link href="https://unpkg.com/quasar-extras@2.0.9/material-icons/material-icons.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/quasar@^1.0.0-beta.0/dist/quasar.min.css" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/quasar@^1.0.0-beta.0/dist/quasar.umd.min.js"></script>
<div id="q-app"></div>
使用 Quasar 框架我有多个 children 并且需要在加载页面后滚动到某个 child。我可以通过使用 setTimeout 设置延迟来实现，但我更喜欢 better/fail-proof 解决方案。
我目前的方法是等待所有 children 挂载（并使用 nextTick）并认为它应该准备好滚动，但 apparent 可能不会。或者我可以等待加载所有图像（因为 QImg 有一个 @load event），但这真的很晚，因为手动我已经可以在图像框已经存在时触发滚动呈现但仍在加载。
在 'the earliest possible moment' 触发的最佳方式是什么？
Point-panel (parent):
new Vue({
el: '#q-app',
template: `
<div id="point-panel" class="map-overlay column scroll">
<small-cards
@hook:mounted="cardsAreReady(cardIndex, picArray.length)"
v-for="(point, cardIndex) in picArray"
:key="cardIndex"
:point-object="point"
:card-index="cardIndex"
/>
<q-btn
@click.native="scrollToCenter"
fab
ripple
class="fixed"
size="10px"
color="black"
label="scroll"
style="right: 18px; bottom: 120px"
/>
</div>
`,
data: function () {
return {
selectedPointIndex: 6,
picArray: ['https://image1', 'https://image2', 'https://image_etc.']
}
},
methods: {
notify (msg) {
this.$q.notify(msg)
},
cardsAreReady (cardIndex, total) {
console.log('one ready.......', `${cardIndex} ...and total ${total}`)
const that = this
if (cardIndex + 1 === total) {
console.log('....all cards MOUNTED!', cardIndex)
setTimeout(() => {
that.$nextTick(() => {
console.log('..........trigger scroll NOW!')
that.scrollToCenter()
})
}, 0)
}
},
scrollToCenter () {
const that = this
console.log('..........cardIndex: ', that.selectedPointIndex)
that.notify('scroll triggered!')
function scrollFunction () {
const element = document.getElementsByClassName(
that.selectedPointIndex.toString()
)
const target = document.getElementById('point-panel')
const iW = window.innerWidth
const iH = window.innerHeight
const myOffset = element[0].offsetLeft
Quasar.utils.scroll.setHorizontalScrollPosition(target, myOffset, 0)
}
setTimeout(() => scrollFunction(), 0)
}
}
})
Images/small-cards (child仁):
Vue.component('small-cards', {
props: {
pointObject: {
type: Object,
required: true
},
cardIndex: {
type: Number,
required: true,
default: 0
}
},
data: function () {
return {
selectedPointIndex: 6
}
},
methods: {
reportError (event) {
console.log(`${event.name}: ${event.message}`)
},
},
template: `
<div
class="mycard"
:class="{
'active': cardIndex === selectedPointIndex,
[cardIndex]: true
}"
>
<q-img
:src="pointObject"
spinner-size="30px"
style="background-color: rgba(255, 225, 215, 0.4)"
@error="reportError"
/>
</div>
`
})
在这里您可以找到显示问题的 jsfiddle。我添加了一个滚动按钮，显示加载后可以成功触发滚动（第6张图，即'the Tiger'滚动到bottom-left角）。
编辑：给问题更多的方向：问题是如果 scroll 很快被触发， DOM 还没有渲染，因此滚动的距离还不能确定.但我会认为之后
mountDom应该确定了吧？！那么，为什么当前的方法不起作用？
EDIT/NEW 答案：
我终于能够让它工作了......这是我必须做的修复它的方法：
- ~EDIT~ 添加
$nextTick（按照 OP 的建议）使这更加一致！ OP 也能够在没有包装器组件的情况下工作 small-cards组件现在emits图像加载完成时的事件- 为名为
small-cards-wrapper 的 - 这个 "wrapper" 有 2 个
props：1)items，图像源数组 2)scrollToIndex，你想滚动到的索引号mount small-cards-wrapper组件将接收发出的事件（来自small-cards组件[s]）并检查它是否是您要滚动到的索引 - 如果是，我们滚动到它..- 本质上，我们在尝试滚动到图像之前等待图像加载..
small-cards 组件创建了一个 "wrapper"
我相信您在查看代码后能够看到我所做的更改，但如果您有任何问题，请告诉我！
[NEWEST JSFiddle (with $nextTick)]
原始答案：
我在 mount 期间触发了 scrollToCenter() 方法，并从模板中删除了 hook.mounted 逻辑..
我已经对代码中所做的上述更改进行了评论，因此您可以准确地看到我所做的。
如果您不希望滚动在装载后 2 秒发生，您可以删除 setTimeout - 这样做是为了显示它在加载后如何滚动（让您有时间看到它发生）。
这是您要找的吗？
Vue.component('small-cards', {
props: {
pointObject: {
type: Object,
required: true
},
cardIndex: {
type: Number,
required: true,
default: 0
},
},
data: function() {
return {
selectedPointIndex: 6
}
},
methods: {
reportError(event) {
console.log(`${event.name}: ${event.message}`);
},
handleLoad() {
this.$emit('loaded-card', true);
}
},
template: `
<div class="mycard" :class="{[cardIndex]: true}">
<q-img :src="pointObject"
@load="handleLoad"
spinner-size="30px"
style="background-color: rgba(255, 225, 215, 0.4)"
@error="reportError">
</q-img>
</div>
`
});
Vue.component('small-cards-wrapper', {
props: {
items: {
type: Array,
required: true,
},
scrollToIndex: {
type: Number,
required: false
}
},
methods: {
isLoaded(x) {
if (Number(x) === Number(this.scrollToIndex)) {
this.$nextTick(() => {
const element = document.getElementsByClassName(x.toString())
const target = document.getElementById('point-panel')
const iW = window.innerWidth
const iH = window.innerHeight
const myOffset = element[0].offsetLeft
Quasar.utils.scroll.setHorizontalScrollPosition(target, myOffset, 0)
this.$q.notify("Scroll Triggered!");
})
}
}
},
template: `
<div id="point-panel" class='map-overlay column scroll'>
<small-cards
v-for='(point, cardIndex) in items'
:key="cardIndex"
:point-object="point"
:card-index="cardIndex"
@loaded-card="isLoaded(cardIndex)"
></small-cards>
</div>
`
})
new Vue({
el: '#q-app',
data: function() {
return {
selectedPointIndex: 6,
picArray: ["https://images.takeshape.io/86ce9525-f5f2-4e97-81ba-54e8ce933da7/dev/144069dc-7390-4022-aa0f-abba022d3a2f/spec.jpg?auto=compress%2Cformat", "https://natureconservancy-h.assetsadobe.com/is/image/content/dam/tnc/nature/en/photos/prescribed_burn_oregon.jpg?crop=0,120,5760,3600&wid=1640&hei=1025&scl=3.5121951219512195", "https://orig11.deviantart.net/1062/f/2015/315/9/6/abstract__7_by_thejsyve1-d9gciwk.jpg", "https://natureconservancy-h.assetsadobe.com/is/image/content/dam/tnc/nature/en/photos/Brown_County_Hills_Leonetti.jpg?crop=33,0,1192,656&wid=4000&hei=2200&scl=0.29818181818181816", "https://www.telegraph.co.uk/content/dam/Travel/galleries/travel/destinations/northamerica/usa/US%20national%20parks/AP84847745_Yosemite_General-xlarge.jpg", "https://dehayf5mhw1h7.cloudfront.net/wp-content/uploads/sites/183/2016/09/15173325/Brown_County_Indiana_Estados_Unidos_2012-10-14_DD_10.jpg", "https://s-media-cache-ak0.pinimg.com/originals/19/e9/58/19e9581dbdc756a2dbbb38ae39a3419c.jpg", "https://cdn.pixabay.com/photo/2015/12/01/20/28/green-1072828_960_720.jpg", "https://www.alwareness.org/wp-content/uploads/2018/10/Bomen-Bos.jpg", "https://www.campz.be/info/wp-content/uploads/header-pic-mountain.jpeg", "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSUzRyiSPfzeIogLgkY1P8ugrvzls23SMhOcJi7vmUfCe4r1nKa", "https://upload.wikimedia.org/wikipedia/commons/f/ff/Pizigani_1367_Chart_10MB.jpg", "https://farm6.staticflickr.com/5720/22076039308_4e2fc21c5f_o.jpg"]
}
},
template: `
<div>
<h4>Scroll now occurs on 'mount'</h4>
<small-cards-wrapper
:items="picArray"
:scroll-to-index="selectedPointIndex"
></small-cards-wrapper>
</div>
`,
})
body {
position: absolute;
z-index: 0;
top: 0;
bottom: 0;
right: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
margin: 0;
padding: 0;
min-width: 100px;
min-height: 100vh;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.map-overlay {
flex-flow: row nowrap;
justify-content: flex-start;
width: 100vw;
height: 30vh;
bottom: 0;
left: 0;
margin: 0;
overflow-x: scroll;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
display: flex;
position: fixed;
background-color: rgba(255, 150, 150, 0.3);
font: 'Abel', 'Helvetica Neue', Arial, Helvetica, sans-serif;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
color: #8e3433;
}
.scroll {
overflow: auto;
}
.column {
flex-direction: column;
}
.row,
.column,
.flex {
display: flex;
flex-wrap: wrap;
}
div {
display: block;
}
html,
body,
#q-app {
width: 100%;
direction: ltr;
}
.mycard {
flex: 1 1 auto;
min-width: 47vw;
margin: 3px 0 9px 2vw;
justify-content: flex-end;
border-radius: 2px;
display: flex;
}
<script src="https://unpkg.com/vue@2.6.10/dist/vue.min.js"></script>
<link href="https://unpkg.com/quasar-extras@2.0.9/material-icons/material-icons.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/quasar@^1.0.0-beta.0/dist/quasar.min.css" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/quasar@^1.0.0-beta.0/dist/quasar.umd.min.js"></script>
<div id="q-app"></div>