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

麻瓜呀2024-12-07 16:02

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

直接上代码

js 复制代码

<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>

关键点

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

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

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