3***@qq.com
3***@qq.com
  • 发布:2024-08-06 16:21
  • 更新:2024-08-06 18:06
  • 阅读:110

image 标签 加 filter: blur(**rpx) IOS渲染异常

分类:uni-app

image 标签 加 filter: blur(**rpx) 多建几个 在页面可以滚动的情况下 上下来回滚动 图片会消失 而且会出现图片只露出一点点的情况 目前只看到ios有

2024-08-06 16:21 负责人:无 分享
已邀请:
3***@qq.com

3***@qq.com (作者)

临时解决方案:backdrop-filter: blur(**rpx)浮在上面解决

3***@qq.com

3***@qq.com (作者)

来人,来人

3***@qq.com

3***@qq.com (作者)

<template>  

        <scroll-view scroll-y="true" class="scroll-box">  
            <view class="bug-page-card" v-for="(item,index) in list" :key="index">  

                <image :src="item.img" mode=""></image>  

            </view>  

        </scroll-view>  

    </view>  
</template>  

<script>  

    export default {  

        data() {  
            return {  

                list: [  

                    {  
                        img: 'https://n.sinaimg.cn/sinacn10113/332/w1024h1708/20190806/73d1-iatixpm8624905.jpg'  
                    },  
                    {  
                        img: 'https://n.sinaimg.cn/sinacn10113/332/w1024h1708/20190806/73d1-iatixpm8624905.jpg'  
                    },  
                    {  
                        img: 'https://n.sinaimg.cn/sinacn10113/332/w1024h1708/20190806/73d1-iatixpm8624905.jpg'  
                    },  
                    {  
                        img: 'https://n.sinaimg.cn/sinacn10113/332/w1024h1708/20190806/73d1-iatixpm8624905.jpg'  
                    },  
                    {  
                        img: 'https://n.sinaimg.cn/sinacn10113/332/w1024h1708/20190806/73d1-iatixpm8624905.jpg'  
                    },  
                    {  
                        img: 'https://n.sinaimg.cn/sinacn10113/332/w1024h1708/20190806/73d1-iatixpm8624905.jpg'  
                    },  
                    {  
                        img: 'https://n.sinaimg.cn/sinacn10113/332/w1024h1708/20190806/73d1-iatixpm8624905.jpg'  
                    },  
                    {  
                        img: 'https://n.sinaimg.cn/sinacn10113/332/w1024h1708/20190806/73d1-iatixpm8624905.jpg'  
                    },  
                    {  
                        img: 'https://n.sinaimg.cn/sinacn10113/332/w1024h1708/20190806/73d1-iatixpm8624905.jpg'  
                    },  
                    {  
                        img: 'https://n.sinaimg.cn/sinacn10113/332/w1024h1708/20190806/73d1-iatixpm8624905.jpg'  
                    },  
                    {  
                        img: 'https://n.sinaimg.cn/sinacn10113/332/w1024h1708/20190806/73d1-iatixpm8624905.jpg'  
                    },  
                    {  
                        img: 'https://n.sinaimg.cn/sinacn10113/332/w1024h1708/20190806/73d1-iatixpm8624905.jpg'  
                    },  
                    {  
                        img: 'https://n.sinaimg.cn/sinacn10113/332/w1024h1708/20190806/73d1-iatixpm8624905.jpg'  
                    },  
                    {  
                        img: 'https://n.sinaimg.cn/sinacn10113/332/w1024h1708/20190806/73d1-iatixpm8624905.jpg'  
                    },  
                    {  
                        img: 'https://n.sinaimg.cn/sinacn10113/332/w1024h1708/20190806/73d1-iatixpm8624905.jpg'  
                    },  
                    {  
                        img: 'https://n.sinaimg.cn/sinacn10113/332/w1024h1708/20190806/73d1-iatixpm8624905.jpg'  
                    },  
                    {  
                        img: 'https://n.sinaimg.cn/sinacn10113/332/w1024h1708/20190806/73d1-iatixpm8624905.jpg'  
                    },  
                    {  
                        img: 'https://n.sinaimg.cn/sinacn10113/332/w1024h1708/20190806/73d1-iatixpm8624905.jpg'  
                    },  
                    {  
                        img: 'https://n.sinaimg.cn/sinacn10113/332/w1024h1708/20190806/73d1-iatixpm8624905.jpg'  
                    },  
                    {  
                        img: 'https://n.sinaimg.cn/sinacn10113/332/w1024h1708/20190806/73d1-iatixpm8624905.jpg'  
                    },  
                    {  
                        img: 'https://n.sinaimg.cn/sinacn10113/332/w1024h1708/20190806/73d1-iatixpm8624905.jpg'  
                    },  
                    {  
                        img: 'https://n.sinaimg.cn/sinacn10113/332/w1024h1708/20190806/73d1-iatixpm8624905.jpg'  
                    },  
                    {  
                        img: 'https://n.sinaimg.cn/sinacn10113/332/w1024h1708/20190806/73d1-iatixpm8624905.jpg'  
                    },  
                    {  
                        img: 'https://n.sinaimg.cn/sinacn10113/332/w1024h1708/20190806/73d1-iatixpm8624905.jpg'  
                    },  
                    {  
                        img: 'https://n.sinaimg.cn/sinacn10113/332/w1024h1708/20190806/73d1-iatixpm8624905.jpg'  
                    },  
                    {  
                        img: 'https://n.sinaimg.cn/sinacn10113/332/w1024h1708/20190806/73d1-iatixpm8624905.jpg'  
                    },  

                ]  

            }  

        }  

    }  

</script>  

<style lang="scss" scoped>  

    .scroll-box {  
        width: 100%;  
        height: 100vh;  

    }  

    /deep/.uni-scroll-view-content {  
        display: flex;  
        flex-wrap: wrap;  
        align-items: center;  
        justify-content: center;  
    }  

    .bug-page-card {  

        width: 350rpx;  
        height: 450rpx;  

        &>image {  
            width: 100%;  
            height: 100%;  
            filter: blur(30rpx);  
        }  

    }  
    .bug-page {  
        width: 100%;  
        height: 100%;  

    }  

</style>

要回复问题请先登录注册