Ion-segment slide to specific segment programmatically

@lsantaniello, Hi.

Actually, I am not sure which question u wanna mention…
But I guess u purpose mention for when router to another page, and that page u have the segment. Then when u call API until completed → segment target to that value and apparent that view don’t you?

And when you call the element value from the segment, the page will auto-scroll to that element ur already point to it don’t you?

So in my solution:
First, stop writing real DOM inside virtual DOM when you are using VDOM, the reason because that will influence the performance of your page. I do not recommend doing that, I prefer using Ref Binding between of them. You can search google to ask about that question.

The second I wanna point is when your page completed the loaded web view, your API may be completed and get data. So that time, you should put the value into your binding data from the segment, make them the first default show it up, like below the code:

const segmentDefault = ref('booking')
const apiData = ref('')

onBeforeMount(async () => {
  call API() ...
})

onMounted(() => {
  // after api completed -> segmentDefault.value = apiData.value;

  segmentDefault.value = apiData.value
})

The finally, stop using scrollIntoView when u are using the ionic aim to build a native app. The reason I mention this is because scrollIntoView will have an issue when you are running on the iOS system, iOS system doesn’t support scrollIntoView. If you are still using it, that will make you tired date to fixed iOS bugs =))))

instead of using scrollIntoView, u can use the methods options provided by the ionic team, and there are their docs. Try it and hope you got successful. :slight_smile:
https://ionicframework.com/docs/api/content
https://forum.ionicframework.com/t/how-to-scroll-to-top-in-ionic-5-vue-3/215424/2