uniapp 小程序 图片出现多余边距

最新推荐文章于 2024-11-07 15:46:12 发布
最新推荐文章于 2024-11-07 15:46:12 发布
阅读量3.1k 收藏 4
点赞数 4
文章标签： uni-app 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Nancy617/article/details/118219759
版权

使用uni-app时，会发现图片下方出现不明边距，并且自己完全没有设置也找不到在哪里
其实是uni-image自带的样式导致。只需要在样式中加上

uni-image {
	display: block;
}

这样图片就正常了。

接着，我们把项目运行到微信开发者工具上，可以看到图片又出现了莫名其妙的边距。
好吧，这是小程序的image自带的样式导致……
那么我们再加上

image{display: block;}

完成～

日后有遇到其他兼容问题再来补充

Nancy617
关注
uniapp之消除图片的空白占用空间
知码客
04-17 636
我们在使用uniapp开发的过程中一定会遇到一个情况就是我们加载的图片总有一点空白出现在不该出现的地方代码如下。是不是很烦人，代码感觉一点问题都没有，那么我们如何去解决这个问题，下面就来说一下其实这个问题解决起来也简单。写在最后还是需要我们去自己去亲身实践，多多敲敲试试总会有意想不到的效果。其实重要的就是在外围的容器上面加上。
uniapp(全端兼容) - 最新详细实现 “在线多端“ 实时聊天通讯功能，电商客服消息聊天列表实时接收发送消息，支持检测对方是否已读/未读、从相册发送图片、录制视频发送、发送本机文件、历史消息等等！
热门推荐
高级前端工程师
07-07 1万+
uni-app，在线聊天，安卓app，苹果app，微信小程序，移动端，H5网页，手机网站，微信小程序、支付宝小程序，手机app端，nvue，多端聊天，uni-app聊天页面发表情 发文件 发图片，微信小程序聊天发表情，IM聊天，即时通讯，超详细教程示例源码，IM聊天教程:发送图片/视频/语音/表情，聊天室，vue，仿微信聊天，钉钉聊天，消息列表，淘宝京东拼多多，客服聊天列表及聊天页面，已读，未读，发视频，发文件，IM聊天，实现app聊天页面功能，好用的聊天插件，组件，聊天列表(类似微信的消息列表)、历史聊天
UniApp 解决image背景图片下方有10rpx 的白边
weixin_50236740的博客
03-05 1020
【代码】UniApp 解决image背景图片下方有10rpx 的白边。
问题记录：uniapp中Image标签出现莫名间距
温的打怪之旅
01-16 973
1.uniapp自定义元素标签。
uniapp中image图片有边距
m0_61848095的博客
04-15 685
使用：uni-image { display: block;
uniapp中多个image之间有空隙处理
04-26 770
但对于我遇到的问题，样式设置稍微调整后，image之间没有出现空隙。在网上找了一些问答，有人说设置。
小程序或uniapp开发image存在边距或者富文本中img宽度超出问题
骑着代码去流浪
03-27 2558
1，image图片存在边距 将imgae设置成display:block或者在其父级添加font-size:0; 2，富文本中img宽度超出的问题 富文本标签的父级设置font-szie:0; 将富文本的img标签添加class: data.replace(/\<img/gi, '<img class="rich_text_img" ') 设置样式： .rich_te...
uniapp中图片和图片之间有间距
qq_37194189的博客
11-07 296
使用font-size重置间距。
uniapp项目总是有莫名边距去不掉
2401_84671784的博客
04-29 410
标签后的空格也会生效（很无语），检查标签后有没有空格，去掉就行。
uni-app写微信小程序分享海报
qq_40101922的博客
07-03 1848
需求：有用户头像，用户昵称，活动标题，商品主图，商品标题，商品价格，小程序二维码 思路：写成一个js文件，就可以在需要的组件中混入使用（mixins），调用绘制函数：createCanvasImage('posterCanvas')，保存图片函数：saveCanvasImage。 方法：canvas的dom元素的top写很大，相当于隐藏。canvas画好后，调用getCanvasImage函数得到图片（posterImg）显示。 调用的组件dom代码：<canvasclass="canvas".
uniapp在手机端页面内容向右拉伸了
最新发布
03-30
在开发过程中，UniApp 的页面内容可能会因为多种原因而出现水平拉伸的现象。这种现象通常由以下几个方面引起： 1. **视口配置不正确** 如果 `viewport` 配置不当，可能导致页面未能正确适配不同分辨率的设备。...
web前端面试题必备
zzDAYTOY的博客
10-12 970
1、vue数据双向绑定原理 vue.js 是采用数据劫持结合发布者-订阅者的模式的方法，通过Object.defineProperty()来劫持各个属性的Getter、setter，在数据变动时发送消息给订阅者。它实现的整个流程是先为每个vue属性用Object.defineProperty()实现数据劫持，为每个属性分配一个订阅者集合的管理数组dep；然后在编译的时候在该属性的数组dep中添加订阅者，v-model就会添加一个订阅者，接着用input举例，为input添加监听事件，修改值就会为这个属性赋值
前端面试题（超全！）
weixin_57136547的博客
09-09 4862
CSS的盒子模型有哪些：标准盒子模型、IE盒子模型CSS的盒子模型区别：标准盒子模型：margin、border、padding、contentIE盒子模型 ：margin、content（ border + padding + content ）通过CSS如何转换盒子模型：/*标准盒子模型*//*IE盒子模型*/伪元素什么是伪元素：是用于创建并操作元素的特定部分，它可以在DOM中创建一个不存在的元素，并为其添加样式。::before：在元素内容之前插入内容。
微信小程序使用＜image＞标签引用图片，底部总有一条白边，解决方式
如果还热爱那就一直写下去吧~
09-14 972
【代码】微信小程序使用＜image＞标签引用图片，底部总有一条白边，解决方式。
uniapp编写小程序解决富文本渲染图片空白间隙问题
Yjx的博客
06-11 1441
你们好，我是金金金。
uni-image踩坑：默认下边距的处理
weixin_45648000的博客
01-02 1686
问题情况 在uniapp中使用image组件遍历出的结果如下，查证问题，都不是内外边距造成的； 直接上处理结果 在html的image标签中增加display:block； 注意：在css文件中加是无效的； <image mode="widthFix" :src="item.thumb" style="display: block;"></image> ...
微信小程序 image跟view标签上下会有间隙
卜卦的博客
01-09 3988
原因： 图片文字等inline元素默许是跟父级元素的baseline对齐，而baseline又和父级底边有必定间距 解决方案 将图片转换为块级对象即，设置img为： display:block; ...
uniapp textarea在iOS上的边距/高度问题
Yu_Jian_Qt的博客
06-23 694
查了半天资料，通过机型绑定样式，最后发现文档中已经说明了有配置属性。。。
【uniapp小程序】苹果手机真机某个边的边框显示不全问题
xiaotangyu7dong的博客
03-25 2567
【uniapp小程序】苹果手机真机某个边的边框显示不全问题 解决方法原创 微信小程序在苹果ios真机上如果有一排有边框的标签时，可能会出现个别边框显示不全的问题。 当标签的父容器宽度(单位rpx)÷2的值为偶数或偶数.5的时候会出现该bug,那么我们可以推到出用200.52=401,3022=604等等都会重现这个bug, 那么解决方案就来了： 1）第一种方式是设置标签父容器的宽度到无bug值，即(奇数或奇数.5)2,例如2812rpx,281.5*2rpx可以解决 2）第二种方式是补充像素单位： 步骤1
uniapp小程序胶囊
02-18
### UniApp 小程序胶囊按钮使用方法及问题解决方案 #### 胶囊按钮概述 在开发微信小程序时，胶囊按钮是一个非常重要的组件，通常用于返回首页或显示菜单等功能。对于基于 UniApp 开发的小程序而言，在实现胶囊按钮功能时需要注意一些特定事项。 #### 实现胶囊按钮的方法 为了确保胶囊按钮能够正常工作并兼容不同平台，建议按照官方文档指导来设置胶囊按钮的位置和样式[^1]： ```css /* 设置胶囊按钮容器 */ .capsule-container { position: fixed; top: var(--status-bar-height); right: 0; z-index: 999; } ``` 通过上述 CSS 定义可以创建一个固定定位的胶囊按钮容器，并利用 `var()` 函数获取状态栏高度以适应各种设备屏幕尺寸差异。 #### 常见问题及其解决办法 ##### 位置偏移 如果遇到胶囊按钮位置不正确的情况，可以通过调整 `.capsule-container` 的样式属性来进行修正。特别是当页面存在滚动条或其他浮动元素干扰时，可能需要额外增加内边距（padding）或者外边距（margin），从而让胶囊按钮保持合适的距离[^2]。 ##### 显示异常 有时可能会发现胶囊按钮无法按预期显示出来。这可能是由于某些自定义样式覆盖了默认样式所造成的。此时应该仔细检查项目的全局样式文件以及局部样式表单，确认是否有冲突之处。另外也要注意查看是否存在 JavaScript 错误影响到了 DOM 渲染过程。 ##### 功能失效 针对部分情况下点击胶囊按钮无响应的问题，则需排查事件绑定逻辑是否存在问题。确保已经为相应的 HTML 元素绑定了正确的触摸/点击事件处理器函数，并且该函数内部实现了必要的跳转操作或者其他交互行为。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值