微信小程序多张image图片排列有空隙解决方案

上个项目是卖东西的,商品详情传的组图,排上去后发现每张图片下有大概10+rpx的下边距,显得很不好看。查了一下貌似是小程序的默认样式。没找到解决方案,看到有说用微信编辑器传图的,好像很麻烦就没去试,自己琢磨了两种方法。

原本不做处理的样子:

.det-pics-w image {
  width: 100%;
  min-height: 630rpx;
}

.det-pics-w {
  position: relative;
}

第一种解决方案:flex

.det-pics-w image {
  width: 100%;
  min-height: 630rpx;
}

.det-pics-w {
  position: relative;
  display: flex;
  flex-direction: column;
}

第二种解决方式:margin-top负值

.det-pics-w image {
  width: 100%;
  min-height: 630rpx;
  margin-top: -12rpx;
}

.det-pics-w {
  position: relative;
}

两种都可以去掉这个间隙。效果如下

时间: 2024-11-29 08:29:03

微信小程序多张image图片排列有空隙解决方案的相关文章

微信小程序左右滑动切换图片酷炫效果(附效果)

开门见山,先上效果吧!感觉可以的用的上的再往下看. 心动吗?那就继续往下看! 先上页面结构吧,也就是wxml文件,其实可以理解成微信自己封装过的html,这个不多说了,不懂也没必要往下看了. 1 <scroll-view class="scroll-view_H" scroll-x scroll-with-animation style="width: 100%;height:{{windowHeight}}px" bindscroll="getSe

微信小程序预加载图片以及占位图片

wxml页面 利用三目运算:代码如下: 1 <image src="{{ima?ima:'../../images/4.jpg'}}" /> (../../images/4.jpg)这里意思是预加载图片大概是一张黑白色的类似于 js代码如下: Page({ /** * 页面的初始数据 */ data: { ima: "", }, /** * 生命周期函数--监听页面加载 */ internet:function(){ setTimeout(functio

微信小程序--图片相关问题合辑

图片上传相关文章 微信小程序多张图片上传功能 微信小程序开发(二)图片上传 微信小程序上传一或多张图片 微信小程序实现选择图片九宫格带预览 ETL:微信小程序之图片上传 微信小程序wx.previewImage预览图片 微信小程序之预览图片 小程序开发:上传图片到腾讯云 .NET开发微信小程序-上传图片到服务器 微信小程序本地图片处理--按屏幕尺寸插入图片 [微信小程序]上传图片到阿里云OSS Python Flask小程序文件(图片)上传技巧 小程序图片上传阿里OSS使用方法 微信小程序问题汇

微信小程序image组件开发程序以及相关图片问题参考资料汇总

微信小程序image组件开发程序以及相关图片问题参考资料汇总,希望对大家小程序开发能有一定的参考和借鉴价值.以下汇总主要涉及到微信小程序image组件有关资源路径.缩放和剪裁模式等进行的探讨,无论是对微信小程序新手还是正在开发中的朋友都是很好的小程序学习资料. 微信小程序image组件必备基础知识: image组件默认宽度300px.高度225px image的属性mode有13种模式,其中4种是缩放模式,9种是裁剪模式 image组件开发教程汇总: 微信小程序自定义组件实现图片单指拖动.双指缩

微信小程序插入背景图片(将图片转为base64)

关于在微信小程序中插入背景图片,是不能将本地文件直接作为background-image的,要么使用网址链接,要么使用base64,这,考虑到小程序的大小问题,毕竟大小限制为2M的小程序是不可能有多余的空间留给background-image的(准确地来说是在样式文件中需要使用图片时不能直接用本地文件,在wxml中可以?). 使用网址链接简单,直接找到需要的图片,一般右键都会有复制图片链接之类的 说一下将本地图片转为base64的操作(当然,并是不所有的图片转base64都合适,这比较适用于那个

微信小程序看上去很美

目前不少关于 微信小程序 的文章主要集中在两各方面:一是开发技术细节:二是怎么靠此赚钱. -- “微信小程序”所处的环境 -- 2016年初,美国号召全民学编程,包括监狱服刑人员.同样,在中国要想掌握 HTML.JavaScript 和 SQL 技术也越来越容易,懂得毛皮的人也越来越多.加上政府近几年鼓励年轻人创业,尤其是“互联网+”概念,让很多人有创业的冲动:找几个朋友谋划个创业点子,找个懂点 HTML+JavaScript+SQL 技术的人合伙,不用营业执照,不用租用场地,未来之星就此诞生.

微信小程序学习指南

作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 微信小程序正式公测, 张小龙全面阐述小程序,定档1月9日上线(附90分钟演讲全文) ... 前言:新人第一坑,跳坑指南:修改后,必须保存:ctrl+S: 1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教

官方问答--微信小程序常见FAQ (17.8.21-17.8.27)

给提问的开发者的建议:提问之前先查询 文档.通过社区右上角搜索搜索已经存在的问题. 写一个简明扼要的标题,并且正文描述清楚你的问题. 提交 BUG:需要带上基础库版本号,设备信息(iOS, Android,开发工具等等),操作系统信息(系统版本),以及可以让他人重现的信息,最好能够提供重现 demo. 对于提供信息过少的问题,会直接关闭,请提供完整信息以后重新打开问题.另外,对于如何做某某功能,可否做某某功能的问题,会直接关闭. 微信小程序常见FAQ(17.8.21-17.8.27) Q:1.5

微信小程序之仿微信漂流瓶

周末找事做做.看到微信里有个漂流瓶.试着敲了敲. 这里是用leancloud做后台.涉及到语音和文字的储存,查询.自己不会写后台代码,对于我算是个福利. 欢迎交流! 技术点: 1.微信小程序开发之录音机 音频播放 动画 (真机可用) 2.微信小程序开发之用户系统 一键登录 获取session_key和openid 3.微信小程序开发之常见问题 不在以下合法域名列表中 wx.request合法域名配置 4.微信小程序开发之本地图片上传(leancloud) 下面带图说模块: 1.主页面 三个but