Why Vuejs scrolls to top of the page after re-rendering a component . It makes it feel like refreshing the page. How may I prevent this scrolling and having the page fixed in it's position
Imaging after clicking on some part it is going to re-render it's component
Here is the piece of code where I do the update , then scrolling to top happens
methods: {
updateData(data) {
let updatedCategory = data.category;
updatedCategory = new Category(updatedCategory);
updatedCategory.isDefault = 1;
for (let cat in this.categories){
if(this.categories[cat].id === updatedCategory.id){
Vue.set(this.categories,cat, updatedCategory);
}
}
}
},
Discover what element has the scroll bar.
Before updating your data, capture the ele.scrollTop.
Update your data.
In a nextTick, restore the element's scrollTop.
https://www.w3schools.com/jsref/prop_element_scrolltop.asp
Related
I have a small app where I am testing the animations for the items. Basically when I swipe the item, it gets removed from the list and the animation is continued for like 0.5s. The problem is that the mobx updates the array when the item is removed from it and it cancels out the animation. So instead of animation continuing to show removal or addon effect, it just disappears quickly.
How do I avoid this? I can have timeouts to wait for the animation to finish and remove an item, but more importantly, the issue is the same if I fetch the data and the array is topped up, I get the same animation cancelling effect.
To show how I am rendering the components would be something like this:
private renderCards = () => {
const {fakeData} = this.props.mainStore
const el = []
fakeData.forEach(fd => {
el.push(
<Draggable key={fd.id}>
<ItemCard item={fd} />
</Draggable>,
)
})
return el
}
Example to replicate is here https://snack.expo.dev/Jh0Vk0cTX
I have some data coming from an API and I'm putting these data inside a slider using SwiperJS.
take a look at the code here:
As shown in the picture above. Whenever I navigate to web development/software development/UI design I load new data. The problem is, whenever I navigate to get the data, and loop through and display the data using swiper, swiper only shows me the first slide. Note that when I inspected the page I found all the slides there but the swiper for some reason is not displaying them.
here's the code:
I found the answer to my question. I had to create a function to force the rerendering of the swiper component. Here's the code:
forceRerenderSwiper() {
// Remove my-component from the DOM
this.renderComponent = false;
// If you like promises better you can
// also use nextTick this way
this.$nextTick().then(() => {
// Add the component back in
this.renderComponent = true;
});
}
then you just add an if statement when you call the component
and don't forget to set the renderComponent to true when you're ready to render it.
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 have two flatlist, one contains the data (dataScroll) and the other the checkboxes (checkScroll) for every data item.
The reason for this is that the checkboxes have to be always visible while the user scrolls horizontaly on the dataScroll (I put the dataScroll in a horizontally scrollable scrollview).
Demo:
expo snack demo
Tried so far:
On dataScroll's scroll event, I got the y offset and moved the checkScroll to that y position.
handleDataScroll = ({ nativeEvent: { contentOffset: { y } } }) => {
this.checkScroll.scrollToOffset({ offset: y, animated: true });
}
It (almost) does the job, but there is a huge delay between the 2 flatlist while scrolling.
--
I read that maybe the use of animated components the way to go, but I couldn't figure out how the animation works in react native.
So I'd like to get some help on how should I bind the two flatlist together so that if I scroll on one list, the other follows it with no (or at least minimal) delay.
If only the dataScroll flatlist is scrollable that's ok too.
We were asked to implement a screen for our app where there would be some data in the form of a list and sections for each data category. When a Section header is pressed, the section data should be expanded or collapsed.
At first, i tried with Listview, and i was changing the datasource each time a header was pressed, but tbh it did not feel like the correct way of doing it.
Creating a custom view, an animating the view's height works ok, but because of the volume of the data, which is big, the initial rendering is a bit slow e.g. there is a noticeable delay when navigating to the screen.
After upgrading to RN 44.3 i was wondering if i could use Sectionlist in a better way than listview.
Generally what's the best way of approaching a requirement like this?
Thanks!
You can animate the items in flatlist/SectionList. A smaple code will look like below (Animates on removing items). You can use same logic for section list as well.
onRemove = () => {
const { onRemove } = this.props;
if (onRemove) {
Animated.timing(this._animated, {
toValue: 0,
duration: ANIMATION_DURATION,
}).start(() => onRemove());
}
};
Refer this link for more details.