<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>
3 个回复
3***@qq.com (作者)
临时解决方案:backdrop-filter: blur(**rpx)浮在上面解决
3***@qq.com (作者)
来人,来人
DCloud_UNI_yuhe
你贴一下具体代码
2024-08-06 16:23
3***@qq.com (作者)
回复 DCloud_UNI_yuhe: 试试
2024-08-06 17:08
DCloud_UNI_yuhe
回复 3***@qq.com: 哪个平台,vue几
2024-08-06 17:13
3***@qq.com (作者)
回复 DCloud_UNI_yuhe: app vue2
2024-08-06 17:14
3***@qq.com (作者)
回复 DCloud_UNI_yuhe: apple
2024-08-06 17:14
3***@qq.com (作者)