Использование платформы Quasar У меня несколько детей, и мне нужно прокрутить до определенного ребенка после загрузки страницы. Я могу сделать это, установив задержку с помощью setTimeout, но я бы предпочел лучшее / безотказное решение. Мой текущий подход заключается в том, чтобы дождаться монтирования всех детей (и использовать nextTick) и подумать, что он должен быть готов к прокрутке, но, очевидно, нет. В качестве альтернативы я могу подождать загрузки всех изображений (так как QImg имеет событие @load ), но это действительно поздно, так как вручную я уже могу запустить прокрутку, когда поля изображений уже отрисованы, но все еще загружаются , Каков наилучший способ срабатывания в «самый ранний момент»?
Точка-панель (родительская):
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"></small-cards>
<q-btn @click.native="scrollToCenter"
fab
ripple
class='fixed'
size="10px"
color="black"
label="scroll"
style="right: 18px; bottom: 120px" />
</div>
</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}`)
let 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)
}
}
})
Изображения / маленькие карточки (дети):
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">
</q-img>
</div>
`
})
Здесь вы можете найти jsfiddle , показывающий проблему. Я добавил кнопку прокрутки, чтобы показать, что после загрузки вы можете успешно запустить прокрутку (6-е изображение, то есть «Тигр» прокручивается в нижний левый угол).
РЕДАКТИРОВАТЬ: Чтобы задать вопрос несколько больше направления: проблема в том, что если scroll будет запущен в ближайшее время, Dom еще не визуализируется, и, следовательно, расстояние до прокрутки еще не может быть определено. Но я думаю, что после
mount Дом должен быть определен ?! Так почему же нынешний подход не работает?