z***@vip.qq.com
z***@vip.qq.com
  • 发布:2018-12-21 12:45
  • 更新:2024-03-09 21:52
  • 阅读:5621

swiper 卡顿,闪烁

分类:uni-app

1、swiper当滑动过程中再次滑动,就会出现无限来回自已滑动。
2、swiper在安卓上有时候图片会一直闪烁。
3、APP在使用swiper的页面上上拉加载图文信息超过3屏以上就会明显卡顿,H5无卡顿。
4、onPageScroll 在android荣耀7C上响应延迟几秒钟。

2018-12-21 12:45 负责人:无 分享
已邀请:
r***@qq.com

r***@qq.com

顶一下,问题1和3依然存在,版本2.3.3

  • riceCake

    请问安卓上闪烁问题如何解决的

    2020-04-22 13:46

riceCake

riceCake

请问安卓上闪烁问题如何解决的

ssyMin

ssyMin

楼主,问题1解决了吗,

开发者M_少

开发者M_少 - 0.0:2548017453@qq.com

有解决的兄弟 吗,小程序APP端,会闪烁啊,

取舍

取舍 - 我们都如流星短暂 但谁能像它闪耀

闪烁问题 监听swiper 的 animationfinish 去赋值current 比较好, 如果是监听change 容易出现 闪烁现象

3***@qq.com

3***@qq.com

问题1现在还有

喜欢技术的前端

喜欢技术的前端 - QQ---445849201

问题1 没有发现,可以录个屏或者上代码看看吗

<!-- 本示例未包含完整css,获取外链css请参考上文,在hello uni-app项目中查看 -->  
<template>  
    <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>  
</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;  
    }  
    .uni-bg-red{  
        background-color: red;  
    }  
    .uni-bg-green{  
        background-color: green;  
    }  
    .uni-bg-blue{  
        background-color: blue;  
    }  
</style>  
  • 3***@qq.com

    安卓机型上 左右滑动 复杂长列表,swiper的change事件 (e) => {current = e.detail.current} 会无限来回触发, H5,ios正常

    2024-03-17 14:57

要回复问题请先登录注册