海神与明月 https://blog.satri.cn/ 全站:2.33 万字
技术

uniapp的swiper切换卡死

2024-12-21 字数:191

原因:上一次滑动未结束就开始下一次滑动,参考定时器
解决:将@change改为@animationfinish
原理:animationfinish反应时间比change长一点,不至于上一次没有反应完就开始下一次滑动
问题代码:

<template>
<view class="pagesA tn-safe-area-inset-bottom">

    <!-- 顶部自定义导航 -->
    <tn-nav-bar :isBack="false" :bottomShadow="false" backgroundColor="#EBECF0" :height="60">
        <view
            style="display: flex; align-items: center; padding-top: 20upx; margin-left:30upx;padding-bottom: 10upx;">
            <!-- 图像 -->
            <image style="width: 80upx; height: 80upx; border-radius: 16upx; margin-right: 20upx;"
                :src="host + '/static_service/avatar/satri.jpeg'"></image>
            <!-- 文字容器 -->
            <view
                style="display: flex; flex-direction: column; justify-content: center; align-items: flex-start;color: #394963;">
                <view style="font-size: 32upx; font-weight: 900; line-height: 40upx;">夏创系统</view>
                <view style="font-size: 22upx; line-height: 30upx; margin-top: 4upx;">为技术攻坚提供国产替代</view>
            </view>
        </view>
    </tn-nav-bar>

    <view style="margin: 0 30upx;">
        <!-- 页签 -->
        <tn-tabs :activeItemStyle="activeitem" :fixed="true" :showBar="false" :top="60" :isScroll="true"
            :list="scrollList" :current="current" @change="tabChange" inactiveColor="#394963" activeColor="#394963"
            :bold="true" :fontSize="30"></tn-tabs>
    </view>

    <!-- 使用swiper来实现页面滑动 -->
    <swiper :current="current" @animationfinish="onSwiperChange" style="height: 100vh;">
        <swiper-item>
            <index_index @gotonews="gotonews" @gotoagent="gotoagent" @talk_to_agent="talk_to_agent"></index_index>
        </swiper-item>
        <swiper-item>
            <index_software></index_software>
        </swiper-item>
        <swiper-item>
            <index_zhengwu></index_zhengwu>
        </swiper-item>
        <swiper-item>
            <index_satri></index_satri>
        </swiper-item>
    </swiper>

</view>

更新:做好防抖也行,就不用更改change了。不过要尤其注意首尾相接的处理。

本文著作权归作者 [ 海神与明月 ]享有,未经作者书面授权,禁止以任何目的、任何形式转载,本声明具有法律效力,作者保留法律范围内的一切权利。