I am using nuxtjs v2.11 ,
I just want to go to testing ref but seems it not move to testing div.
<button #click="goToRefsTesting()">
go to testing dev
</button>
<div
ref="testing"
id="testing"
>
just testing
</div>
in the methods as you expect
methods: {
goToRefsTesting() {
console.log('go to ref pls')
this.$refs.testing.scrollTop = 0
},
i got the console log message, but it still not move to testing div. any thought? is it nuxt issue or what.
Your page needs to have enough content for scrollTop or scrollIntoView to be able to work.
Most likely there's nothing after the div, so the page cannot scroll.
Add some more content and you'll see the content move.
ok, i found out it is not vue/nuxt problem. the container got auto scroll properties. so that is why it is not working.thanks
This worked for me in any component without ref (but it only scrolls to top), smooth scrolling is default behavior
<button #click=scrollToTop()>Jump to top of page
methods: {
scrollToTop() {
window.scrollTo({ top: 0 });
}
}
Related
I develop a chat app in Ionic Vue. To always see the latest messages, I have to scoll to the bottom automatically.
For web I use vue-chat-scroll, but this does not work with Ionic Vue.
I have tried a lot of different tactics but nothing works:
var objDiv = document.getElementById("your_div");
objDiv.scrollTop = objDiv.scrollHeight;
or
this.scrollIntoView(false);
or
var element = document.getElementById("scroll");
element.scrollIntoView();
or
vue-scroll-to with a hidden anchor at the end of the view
I have also tried different methods of listing the chat messages:
a combination of IonGrid with Rows
a normal ul / li list
just with divs
Take a look at "ion-content" component, https://ionicframework.com/docs/api/content
It has many methods and events for scrolling.
You only need to call the method .scrollToBottom() on the <ion-content> element.
You can use the following approach, refering the ion-content with a ref and calling the method scrollToBottom bellow:
<template>
<ion-content ref="content">
</ion-content>
</template>
export default defineComponent({
methods: {
scrollToBottom(){
this.$refs['content'].scrollToBottom()
}
},
});
</script>
I'm trying to build a mobile small application using v-expansion-panels to display a list.
The idea is that when the user adds a new item in such list it will open the new panel and scroll down to such new panel.
I found a goTo() method in the $vuetify variable, unfortunatly the v-expansion-panels transition (the "opening") take some time and the goTo() won't completely scroll down because of the scrollbar height changes.
So from my understanding I need to detect the end of the transition (enter/afterEnter hook).
Per the vuetifyjs documentation, I could hope to have a "transition" property on my component. (Which isn't the case anyway). But such property is only a string so I can't hook into it.
My other idea is to, somehow, find the transition component and hook into it. Unfortunatly I have trouble understanding el/vnode and the way vuejs is building is tree like the vue-devtool show and I can't get the transition component. When debugging (in the enter hook callback of the transition) it is like the component/el/vnode has a parent but isn't the child of anybody.
Is there a way to do what I'm looking for?
Here is a jsfiddler of what I currently do: https://jsfiddle.net/kdgn80sb/
Basically it is the method I'm defining in the Vue:
methods: {
newAlarm: function() {
const newAlarmPanelIndex = this.alarms.length - 1;
this.alarms.push({title: "New line"});
this.activePanelIndex = newAlarmPanelIndex;
// TODO:
this.$vuetify.goTo(this.$refs.alarmPanels[newAlarmPanelIndex]);
}
}
Firstly you should open manually panel and then use goTo with a timeout.
It works for me, just give some time to a panel to open.
<v-expansion-panels v-model="alarmPanels">
<v-expansion-panel>
<div id="example" />
</v-expansion-panel>
</v-expansion-panels>
this.alarmPanels.push(0); // Use index of expansion-panel
setTimeout(() => {
this.$vuetify.goTo(`#${resultId}`);
}, 500);
I want to lazy load content when the user scrolls down to the bottom of the Bootstrap modal, sort of like an infinite scroll, using Vue.js. I'm fetching all my data from a action method on API call. The data coming from this API is stored in array of objects on mounted and is used in the application.
So far so good. But now I want to implement that in the initial state, only the first 10 items are fetched from the API. When the user scrolls down to the bottom of the page I want to fetch the next 10 results and so on. I've looked at the documentation of the API that I'm using, and it has support for offsetting the items I'm fetching. Though I'm not sure where to start from there. Does anyone know any good resources on this subject? Thanks a ton!
after a while i solved the problem
here is my sample project for you reading this question
Here is my solution if you are trying to avoid using an npm package. You can use it in any scrollable div in vue. And in the if statement below is where you would handle your api call to fetch more results.
<template>
<div class="scroll" #scroll="scroll">
</div>
</template>
<script>
export default{
name: "Scroll",
data(){
return{
bottom: false
}
},
methods:{
scroll(e){
const {target} = e;
if (Math.ceil(target.scrollTop) >=
target.scrollHeight - target.offsetHeight) {
//this code will run when the user scrolls to the bottom of this div so
//you could do an api call here to implement lazy loading
this.bottom = true;
}
}
}
</script>
I am trying out ionic 4 for the first time and I am trying to change the css style of an element on my page.
eg.
I have a div
<div id="foo"></div>
Now on mouseover I would like to move the div to a different position on my page.
How do I get the element #foo and change the position on mouseover in my component?
please note this is just an example of what I want to do and i have no interest in using CSS for this since it would not working for me.
I have done some reading on ionic 4 and the shadow dom but it still makes no sense to me.
Since you do not want to write any css and want to refer element in your controller, can use viewChild as shown below
In HTML
<div #foo></div>
In Controller
import { Component, ViewChild, ElementRef } from '#angular/core';
.
.
.
#ViewChild('foo') divRef: ElementRef;
constructor() {
}
ngAfterViewInit() {
this.divRef.nativeElement.style.background = "red";
}
Here is running code in stackblitz
I imported the code from https://github.com/nolimits4web/Swiper/blob/master/demos/23-thumbs-gallery.html
But the first problem I had was that the slider didn't show so I fixed that with adding min-height: 250px; to the div class .swiper-slide(this is the only thing I changed), my new problem is that the slider doesn't work.
When I resize the browser the slider suddenly works, I can't find what is causing the problem.
You can watch the slider at nielsvt.remvoo.com and then section portfolio, the slider will be visible at the bottom of the page
I had a similar issue. I simply fixed it by initializing the swiper once the page loads.
useEffect(()=> {
swiper.init()
}, [])
On the swiper section definition put the observer property true.
const swiper = new Swiper(swiperIdentifier, {
...
observer: true,
});