原因:上一次滑动未结束就开始下一次滑动,参考定时器
解决:将@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>
.pagesA {
max-height: 100vh;
}
swiper {
width: 100%;
height: 100%;
}
更新:做好防抖也行,就不用更改change了。不过要尤其注意首尾相接的处理。