- 发布:2023-03-09 16:13
- 更新:2023-03-09 16:13
- 阅读:396
产品分类: uniapp/App
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: 10
HBuilderX类型: 正式
HBuilderX版本号: 3.7.3
手机系统: Android
手机系统版本号: Android 12
手机厂商: 小米
手机机型: 小米10
页面类型: nvue
vue版本: vue2
打包方式: 云端
项目创建方式: HBuilderX
示例代码:
<view class="view-tab-w">
<a-tabs :current="tabsCurrent" :tabs="tabslist" selectedSize="50" size="36" selectedColor="#191919"
@changeTab="tabsChange" background="#F3F4F6" :isSlider="false"></a-tabs>
</view>
<swiper class="swiper-page" :current="tabsCurrent" @change="toSwiperChange">
<swiper-item class="swiper-item">
<recommendPage class="swiper-item-page" :cityName="bannerCity" :swiperList="swiperList" :imgList="imgList"
totalNum="totalPageTj" :itemList="recommendList"></recommendPage>
</swiper-item>
</swipe>
</swipe>
操作步骤:
<view class="view-tab-w">
<a-tabs :current="tabsCurrent" :tabs="tabslist" selectedSize="50" size="36" selectedColor="#191919"
@changeTab="tabsChange" background="#F3F4F6" :isSlider="false"></a-tabs>
</view>
<swiper class="swiper-page" :current="tabsCurrent" @change="toSwiperChange">
<swiper-item class="swiper-item">
<recommendPage class="swiper-item-page" :cityName="bannerCity" :swiperList="swiperList" :imgList="imgList"
totalNum="totalPageTj" :itemList="recommendList"></recommendPage>
</swiper-item>
</swipe>
</swipe>
预期结果:
预期 点击tab0 直接点击 tab2选项卡时 监听swiper onchange获取index值 不会重复打印获取值得问题 应该只会打印一次值
预期 点击tab0 直接点击 tab2选项卡时 监听swiper onchange获取index值 不会重复打印获取值得问题 应该只会打印一次值
实际结果:
预期 点击tab0 直接点击 tab2选项卡时 监听swiper onchange获取index值 先打印出 index =2 紧接打印出 index=1 index=2值 重复打印获取值得问题
预期 点击tab0 直接点击 tab2选项卡时 监听swiper onchange获取index值 先打印出 index =2 紧接打印出 index=1 index=2值 重复打印获取值得问题
bug描述:
nvue页面 顶部栏是自定义tab选项卡切换 底下是swiper包裹的左右布局 一共三个tab 且对应三个swiper-item布局页面
发现bug步骤:
1、点击tab选项卡切换 依次按顺序 点击tab 从0-1-2 swiper选项卡监听事件 onchange里的获取index值都是正常得
偶然问题在于:
2、我从tab0选项卡 直接点击选项卡 tab2上 通过打印swiper onchange事件 发现 打印index 会先打印出 index=2 值 然后又打印出 index=1 index=2 输出 (存在偶先情况,且发生频率挺高)
已上传附件照片日志打印
会导致页面tab0 点击tab2时 页面切换 发生tab抖动情况