Ion-segment slide to specific segment programmatically

Hi, I need to move on specific segment after page loading.

The scenario is complex: the segment buttons have been loaded at onload.

On Loading I call rest api, rest api returns data and I build segments. After defined segment array I need to move user on specific button.

    <ion-segment [(ngModel)]="tabList" scrollable color="dark">
        <ion-segment-button *ngFor="let level of levels ; let i=index" [value]="level.roundLevel" [id]="level.roundLevel" (click)="changeTab(i,level, $event)" [class.segment-button-checked]="activeBtn == i">
            {{level.label}}
        </ion-segment-button>
    </ion-segment>

It works but If there are several buttons and the button is not showed in the view because it is off the screen (for example it is it is the twentieth on the list)

I used this code to scroll manually the bar but when this block code is called, the “segment.querySelectorAll” is null.

moveToSegment(index) {
    this.activeBtn = index;
    var segment = document.querySelector('ion-segment');
    segment.value = index;
    var active = segment.querySelectorAll('ion-segment-button')[index];
    if (active) {
      active.scrollIntoView({ behavior: "smooth", inline: "center" })
    }
  }

How can I triger this code when the segment is rendered?

U have Angular code in a Vue forum using non Vue and non Angular ways to address the DOM.

I not understand. Can you help me?

@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