秒火食品代理网_揭阳专业网站建设_天堂网_营销策划经典案例

uniapp微信小程序任意图片铺满, 超出下滑

直接上代码

<template><scroll-view scroll-y="true" class="rule-box"><img :src="img" mode="widthFix" class="rule-img"></scroll-view>
</template><script setup lang="ts">
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
const img = ref('' as string)
onLoad((query) => {console.log(query)img.value = query?.img
})</script><style lang="scss" scoped>
.rule-box {width: 100%;height: 100vh;.rule-img {width: 100%;height: 100%;}
}
</style>

关键点

1. scroll-view: 可滚动视图区域。使用竖向滚动时，需要给scroll-view一个固定高度。这里设置了100vh视口高度

2. img标签属性mode=“widthFix”。 widthFix/heightFix 模式会在图片加载完成后，动态改变图片的高度或宽度。图片高度或宽度的动态改变。mode属性相应的微信小程序文档跳转

参考引用的原文链接, 膜拜大佬