暖东
暖东
  • 发布:2021-04-27 10:27
  • 更新:2021-04-27 11:25
  • 阅读:485

【报Bug】引用swiper/swiper-item,内容快速滚动

分类:uni-app

app中引用如下组件内容。home键返回,停顿一段时间,再进来 它会快速滚动到第一条数据。然后正常滚动。偶然发生的情况。

<!--   
展示屏幕文字滚动效果  

使用方法:  

 -->  
<!--   
展示屏幕文字滚动效果  

usage:  
 list:数组数据  
 @getCurrentIndex  获取当前swiper的下标  
 <textscroll :list="list" @getCurrentIndex="getIndex"/>  

 -->  

<template>  
    <view class="_notice">  
        <swiper class="_swiper tc" @change="slideChange" autoplay="true" :interval="interval" circular="true"  
         display-multiple-items="2" vertical="true" :duration="duration">  
            <swiper-item v-for="(item,index) in list" :key="index">  
                <view class="swiper-item uni-bg-red">{{item}}</view>  
            </swiper-item>  
        </swiper>  
    </view>  
</template>  

<script>  
    export default {  
        props: {  
            //显示数据  
            list: {  
                type: Array,  
                defual:function(){  
                    return [];  
                }  
            },  
        },  
        data() {  
            return {  
                interval:3000,  
                duration:1000,  
            };  
        },  
        methods:{  
            slideChange(e){  
                this.$emit('getCurrentIndex',e.detail.current);   

            }  
        }  

    };  
</script>  

<style lang="scss">  
    ._notice {  
        position: fixed;  
        left: 0;  
        top: 0;  
        /* #ifdef H5 */  
        top: 88rpx;  
        /* #endif */  
        z-index: 99;  
        width: 100%;  
        background: rgba(72, 1, 1, 0.3);  
        font-size: 24rpx;  
        height: 50rpx;  
        color: #ffffff;  
        border-radius: 6rpx;  
        overflow: hidden;  
        box-sizing: border-box;  

    }  

    ._swiper {  
        line-height: 50rpx;  
    }  
</style>  
2021-04-27 10:27 负责人:无 分享
已邀请:
暖东

暖东 (作者)

如何解决这个问题呢

大傻智

大傻智 - it界的彭于晏

你可以试试页面隐藏时把自动轮播关了,打开页面时再启用

  • 暖东 (作者)

    好用的好用的 一语点醒梦中人 谢谢

    2021-04-28 16:49

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