w***@duoduo123.com
w***@duoduo123.com
  • 发布:2023-02-16 11:06
  • 更新:2023-02-16 16:16
  • 阅读:178

用了swiper就报错,ide退回到3.5版本就没问题

分类:uni-app

产品分类: uniapp/H5

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: win10

HBuilderX类型: 正式

HBuilderX版本号: 3.6.18

浏览器平台: Chrome

浏览器版本: 1

项目创建方式: HBuilderX

示例代码:
<template> <view class="content"> <view> <view class="uni-margin-wrap"> <swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"

duration="duration"> <swiper-item>
<view class="swiper-item uni-bg-red">A</view>
</swiper-item>
<swiper-item>
<view class="swiper-item uni-bg-green">B</view>
</swiper-item>
<swiper-item>
<view class="swiper-item uni-bg-blue">C</view>
</swiper-item>
</swiper>
</view>

        <view class="swiper-list">  
            <view class="uni-list-cell uni-list-cell-pd">  
                <view class="uni-list-cell-db">指示点</view>  
                <switch :checked="indicatorDots" @change="changeIndicatorDots" />  
            </view>  
            <view class="uni-list-cell uni-list-cell-pd">  
                <view class="uni-list-cell-db">自动播放</view>  
                <switch :checked="autoplay" @change="changeAutoplay" />  
            </view>  
        </view>  

        <view class="uni-padding-wrap">  
            <view class="uni-common-mt">  
                <text>幻灯片切换时长(ms)</text>  
                <text class="info">{{duration}}</text>  
            </view>  
            <slider @change="durationChange" :value="duration" min="500" max="2000" />  
            <view class="uni-common-mt">  
                <text>自动播放间隔时长(ms)</text>  
                <text class="info">{{interval}}</text>  
            </view>  
            <slider @change="intervalChange" :value="interval" min="2000" max="10000" />  
        </view>  
    </view>  

</view>
</template>

<script>
export default {
data() {
return {
background: ['color1', 'color2', 'color3'],
indicatorDots: true,
autoplay: true,
interval: 2000,
duration: 500
}
},
methods: {
changeIndicatorDots(e) {
this.indicatorDots = !this.indicatorDots
},
changeAutoplay(e) {
this.autoplay = !this.autoplay
},
intervalChange(e) {
this.interval = e.target.value
},
durationChange(e) {
this.duration = e.target.value
}
}
}
</script>

<style>
.uni-margin-wrap {
width: 690rpx;
width: 100%;
}
.swiper {
height: 300rpx;
}
.swiper-item {
display: block;
height: 300rpx;
line-height: 300rpx;
text-align: center;
}
.swiper-list {
margin-top: 40rpx;
margin-bottom: 0;
}
.uni-common-mt {
margin-top: 60rpx;
position: relative;
}
.info {
position: absolute;
right: 20rpx;
}
.uni-padding-wrap {
width: 550rpx;
padding: 0 100rpx;
}
</style>

操作步骤:

<swiper>

预期结果:

出现错误提示

实际结果:

出现错误提示

bug描述:

项目已经运行很久了,升级HBuilderX到3.6.18后,突然出现下图的报错,排查到最后,发现是swiper的问题,页面什么都没用,就是单纯的用官方文档的swiper示例代码,也是报错
用HBuilderX3.5版本的,就没这个问题
但是新建一个全新的项目,刚才的测试代码放进去,又没问题

2023-02-16 11:06 负责人:无 分享
已邀请:
DCloud_UNI_LXH

DCloud_UNI_LXH

可以下载一个 3.7.1 alpha 的运行试试看,我测试没有问题

该问题目前已经被锁定, 无法添加新回复