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

devtools/2025/2/15 13:09:51/

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属性相应的微信小程序文档跳转

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


http://www.ppmy.cn/devtools/140684.html

相关文章

第十六届蓝桥杯模拟赛(第一期)-Python

本次模拟赛我认为涉及到的知识点&#xff1a; 分解质因数 Python的datetime库 位运算 简单dp 1、填空题 【问题描述】 如果一个数 p 是个质数&#xff0c;同时又是整数 a 的约数&#xff0c;则 p 称为 a 的一个质因数。 请问 2024 有多少个质因数。 【答案提交】 这是一道结…

聚簇索引与非聚簇索引

目录 一、聚簇索引&#xff08;Clustered Index&#xff09; 二、非聚簇索引&#xff08;Non-Clustered Index&#xff09; 三、示例说明 一、聚簇索引&#xff08;Clustered Index&#xff09; 定义&#xff1a; 聚簇索引是一种将数据存储和索引合为一体的索引方式。 表中…

TTC模型(1D和2D)理论推导及python实现

目录 第一部分:TTC模型理论背景与应用场景1.1 什么是TTC?1.2 为什么需要TTC?1.3 应用场景第二部分:TTC模型理论推导(1D 和 2D)2.1 1D模型推导距离公式2.2 2D模型推导相对位置与速度第三部分:Python实现:TTC模型计算(面向对象设计)3.1 Python实现的一维TTC代码实现3.2…

C++平常学习用的

4.1 友元函数 4.2 友元类 5.2 类模板 7.2 虚函数dynamic_cast运算 7.2 纯虚函数和抽象类

webpack 题目

文章目录 webpack 中 chunkHash 和 contentHash 的区别loader和plugin的区别&#xff1f;webpack 处理 image 是用哪个 loader&#xff0c;限制 image 大小的是...&#xff1b;webpack 如何优化打包速度 webpack 中 chunkHash 和 contentHash 的区别 主要从四方面来讲一下区别&…

Nginx配置中server_name参数未生效的问题解决

天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物。 每个人都有惰性&#xff0c;但不断学习是好好生活的根本&#xff0c;共勉&#xff01; 文章均为学习整理笔记&#xff0c;分享记录为主&#xff0c;如有错误请指正&#xff0c;共同学习进步。…

解谜类游戏《迷失岛2》等如何抽象出一套通用高效开发框架?

解谜类游戏以精妙的谜题设计和引人入胜的故事叙述为特点&#xff0c;考验着玩家的智慧与观察力。《迷失岛2》与《南瓜先生2九龙城寨》正是这一领域的佳作。游戏以独特的艺术风格和玩法设计吸引了大量玩家&#xff0c;而它们背后隐藏着一套强大的框架。 上海胖布丁游戏的技术总…

mysql 和 tidb的区别

MySQL 和 TiDB 是两种常见的关系型数据库管理系统&#xff0c;但它们的设计理念和适用场景有显著区别。以下从架构、性能、扩展性、适用场景等方面进行对比&#xff1a; 架构设计 MySQL 单机架构为主&#xff0c;可通过主从复制实现读写分离或高可用。分布式支持依赖外部组件&…