DWQA QuestionsCategory: ProgramThere is a bug when miniui tab container and infinite scroll are used together
Xu Yanchao asked 1 month ago

The problem of wireless trigger loading will appear when the miniui tab container and infinite scroll are used together. If you switch to the first container, the second and third container will be loaded infinitely. If you switch to the second container, the first and third container will be loaded infinitely. How do you solve this problem
<mt-tab-container-item id=”1″>

            <ul     class="list-ul"
                    v-infinite-scroll="loadMore"
                    infinite-scroll-disabled="loading"
                    infinite-scroll-distance="10">
                <li class="list-li" v-for="item in list">
                </li>
            </ul>
        </mt-tab-container-item>
        <mt-tab-container-item id="2">
            <ul     class="list-ul"
                    v-infinite-scroll="loadMore1"
                    infinite-scroll-disabled="loading1"
                    infinite-scroll-distance="10">
                <li class="list-li" v-for="item in list1">
                    
                </li>
            </ul>
        </mt-tab-container-item>
        <mt-tab-container-item id="3">
            <ul     class="list-ul"
                    v-infinite-scroll="loadMore2"
                    infinite-scroll-disabled="loading2"
                    infinite-scroll-distance="10">
                <li class="list-li" v-for="item in list2">
                    
                </li>
            </ul>
        </mt-tab-container-item>
        
        
        
sleep_SBD replied 1 month ago

I also encountered this problem, seemingly misunderstood, can only change the form of interaction

1 Answers
Xin Yue answered 1 month ago

In infinite scroll, add a V-IF = selected = = ID to combine the infinite scroll with the ID and selected of the tab. When the selected ID corresponds to the selected ID, the corresponding infinite scroll will be performed.
The code of infinite scroll is as follows:
<div v-infinite-scroll=”loadMore”
infinite-scroll-disabled=”loading”
infinite-scroll-distance=”10″
class=”content”
v-if=”selected == 1″

Modify the condition of V-IF as needed