uniapp使用uni-swipe-action后右侧多了小于1px的间隙

news2024/10/5 14:40:28

问题:uniapp使用uni-swipe-action后右侧多了小于1px的间隙。且在真机上没有问题,但是在微信开发者工具中有问题。

代码如下:在滑动滑块或者点击这个区域时,就会出现问题。

 

<scroll-view :scroll-y="true" :style="'height:'+contentHeight+'px'" :enable-back-to-top="true">
		<!-- 有商品展示 -->
		<view class="cart-box" v-if="goodsList.length>0">
			<uni-swipe-action class="goods-list" v-for="item in goodsList" :key="item.goods_id">
				<uni-swipe-action-item class="swipe-goods-item" :right-options="options"
					@click="sliderClick($event, item.goods_id)">
					<view class="goods-display">
						<view class="radio">
							<radio class="radio" @click="clickCurRadio(item.goods_id,item.checked)"
								:value="item.goods_id" :checked="item.checked?true:false" color="#bc2840"
								style="transform:scale(0.9)" />
						</view>
						<bjs-settle-goods class="bjs-goods" :goods="item">
							<template v-slot:cart>
								<view class="goods-promo">限时购</view>
								<view class="goods-price-desc">
									优惠已降价¥38
								</view>
								<view class="goods-price">
									<bjs-price :price="item.goods_price"></bjs-price>
									<uni-number-box class="number-box" v-model="item.cart_counts"
										@change="changeQuality($event,item)" />
								</view>
							</template>
						</bjs-settle-goods>
					</view>
				</uni-swipe-action-item>
			</uni-swipe-action>
		</view>
	</scroll-view>

怀疑是,父级容器cart-box和子级uni-swipe-action宽度没有完全相等导致。而容器都没有设置固定宽度值,父级容器cart-box只设置了padding: 10px 10px; 

尝试使用伪元素:after没用

解决:在子级容器添加padding-right:5px(值必须固定)撑满容器,并且设置 display: flex;

	.cart-box {
		background-color: #f5f3f4;
		padding: 10px 10px;

		.goods-list {
			padding: 10px 10px;
			background-color: $whiteBgColor;
			display: flex;
			border-radius: 6px;
			flex-direction: column;

			.swipe-goods-item {
				// 父级goods-list 宽度和滑块宽度不一致,导致右侧1px间隙
				padding-right: 5px;
				display: flex;
			}

			.goods-display {
				height: 100%;
				display: flex;


				.radio {
					width: 8%;
					height: 100%;
					@extend .displayCenter;
				}

				.bjs-goods {
					width: 92%;
					display: flex;
				}

				.goods-promo {
					margin: 5px 0;
					width: fit-content;
					border: 1px solid $redColor;
					padding: 5px;
					border-radius: 5px;
					font-size: 15px;
					color: $redColor;
				}

				.goods-price {
					margin: 5px 0;
					display: flex;
					justify-content: space-between;

					.number-box {
						margin-left: 10px;
					}
				}
			}
		}
	}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/792019.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Android 帧率分析

卡顿&#xff1a; 界面呈现是指从应用生成帧并将其显示在屏幕上的动作。如需确保用户能够流畅地与您的应用互动&#xff0c;您的应用呈现每帧的时间不应超过 16ms&#xff0c;以达到每秒 60 帧的呈现速度&#xff08;为什么是 60fps&#xff1f;&#xff09;。如果您的应用存在…

TRT4-trt-integrate - 3 使用onnxruntime进行onnx的模型推理过程

前言&#xff1a; onnx是microsoft开发的一个中间格式&#xff0c;而onnxruntime简称ort是microsoft为onnx开发的推理引擎。允许使用onnx作为输入进行直接推理得到结果。 py接口的推理过程&#xff1a; main函数&#xff1a; if __name__ "__main__":session onn…

Faiss简单使用

Faiss是Facebook AI Research开发的快速相似性搜索&#xff08;similarity search&#xff09;计算库&#xff0c;为稠密向量提供高效相似度搜索和聚类&#xff0c;支持十亿级别向量的搜索。 Faiss 的核心原理是基于向量索引和近似最近邻搜索。它通过构建索引结构来加速相似性…

android9-android13 AMS演进初窥

目录 一&#xff1a;概览 WindowManagerService 基本介绍 ActivityManagerService 基本介绍 二&#xff1a;AMS及其关联的WMS中主要组件的类图和对像图 一&#xff1a;android 9中AMS/WMS的类图和对像图 二&#xff1a;android 10中AMS/WMS的类图和对像图 三&#xff1a…

怎么给图片去底色?这几个方法一定要知道

如果你是一位设计师或者是需要制作图片的人&#xff0c;那么你一定知道去除图片底色的重要性。无论是制作海报、广告、产品图片还是网站页面&#xff0c;去除图片底色可以让你的设计更加精细、美观、专业。在本文中&#xff0c;我们将介绍三种常见的图片去底色方法&#xff0c;…

p7付费课程笔记5:串行gc以及并行gc

前言 前段时间我们学习jvm的基础结构和gc相关的基础知识&#xff0c;今天我们详细讲讲几大gc。 串行gc 串行 GC 对年轻代使用 mark-copy (标记-复制) 算法&#xff0c;对老年代使用 mark-sweep-compact (标记-清除-整理) 算法。 两者都是单线程的垃圾收集器&#xff0c;不能…

百度AI成为移动生态强者的真相

移动互联网的发展&#xff0c;让移动生态成为了互联网企业竞争的重要战场。在这场竞争中&#xff0c;百度AI凭借着其优质的技术实力和完善的生态系统&#xff0c;成为了移动生态中的强者。 那么&#xff0c;百度AI究竟靠什么成为了强者呢&#xff1f;首先&#xff0c;百度AI的技…

网络安全/黑客零基础入门(经验分享)

相关网站推荐 博主研究方向为安全领域&#xff0c;以后可能更多的在圈子内发表文章&#xff0c;提高文章质量。 1、FreeBuf 国内关注度最高的全球互联网安全媒体平台&#xff0c;爱好者们交流与分享安全技术的社区&#xff0c;网络安全行业门户。 2、看雪 看雪论坛是个软件…

GB/T 25000.51解读——软件产品的兼容性怎么测?

GB/T 25000.51-2016《软件产品质量要求和测试细则》是申请软件检测CNAS认可一定会用到的一部国家标准。在前面的文章中&#xff0c;我们为大家整体介绍了GB/T 25000.51-2016《软件产品质量要求和测试细则》国家标准的结构和所涵盖的内容以及对软件产品的八大质量特性中的功能性…

Failed to load local font resource:微信小程序加载第三方字体

加载本地字体.ttf 将ttf转换为base64格式&#xff1a;https://transfonter.org/ 步骤如下 将下载后的stylesheet.css 里的font-family属性名字改一下&#xff0c;然后引进页面里就行了&#xff0c;全局样式就放app.scss&#xff0c;单页面就引入单页面 注&#xff1a; .title…

Jmeter+MySQL链接+JDBC Connection配置元件+使用

参考大大的博客学习&#xff1a;怎么用JMeter操作MySQL数据库&#xff1f;看完秒懂&#xff01;_jmeter mysql_程序员馨馨的博客-CSDN博客 注&#xff1a;里面所有没打码的都是假数据&#xff0c;麻烦大家自行修改正确的信息。 一、背景 需要取数据库中的值&#xff0c;作为…

html2Canvas+jsPDF 下载PDF 遇到跨域的对象存储的图片无法显示

一、问题原因 对象存储的域名和你网址的域名不一样&#xff0c;此时用Canvas相关插件 将DOM元素转化为PDF&#xff0c;就会出现跨域错误。 二、解决办法 两步 1. 图片元素上设置属性 crossorigin"anonymous" 支持原生img和eleme组件 2. 存储桶设置资源跨域访问…

盘点!项目管理软件排行榜前十名

如今企业规模不断扩大&#xff0c;业务逐渐复杂化&#xff0c;项目管理已经成为现代企业管理中不可或缺的一环。作为协调管理者、团队成员和客户之间交流的工具&#xff0c;项目管理软件不仅可以提高工作效率&#xff0c;还可以提高项目成功的几率&#xff0c;对于企业具有重要…

[小尘送书-第二期]《从零开始读懂量子力学》由浅入深,解释科学原理;从手机到超导,量子无处不在;从微观到宏观,遐想人生的意义!

大家好&#xff0c;我是小尘&#xff0c;欢迎关注&#xff0c;一起交流学习&#xff01;欢迎大家在CSDN后台私信我&#xff01;一起讨论学习&#xff0c;讨论如何找到满意的工作&#xff01; 本文目录 一、前言二、作者简介三、内容简介四、抽奖方式五、名家推介写在最后 一、前…

Linux使用教程

一、Linux命令基础 1、ls、ll命令——展示数据 ①ls命令——平铺展示数据 其中ls命令以平铺的方式展现数据 ②ll命令——列表展示数据 ll命令以列表的方式展现数据 -a选项&#xff0c;表示&#xff1a;all的意思&#xff0c;即列出全部文件&#xff08;包含隐藏的文件/文件夹…

【Vue】div标签实现输入框,利用contenteditable=“true“属性的标签实现

推荐个链接&#x1f517;&#xff0c;可以更好的查阅自己遇到的问题&#xff08;点击此处即可跳转&#xff09; 使用 div 实现 input、textarea 输入框 <template><div class"content"><div class"main editTextList" ><divclass&q…

[c++实验] 快读快写,O123优化,原版用时对比

前言 学过c的多知道&#xff0c;准确的来说是做过c题目的都知道&#xff1a;c题目不仅要求代码正确&#xff0c;还要求用时&#xff0c;大多用时要求都在200ms--1000ms之间&#xff0c;要是遇到大数据时&#xff0c;超时的可能就会大大提升。 结论 用时的把控也很重要&#…

网站实现下载apk安装包

目录 1、背景说明2、效果图3、具体实现3.1 界面代码3.2 js代码 4、说明4.1 存在异常4.2 解决方案 5、参考资料 1、背景说明 有时需要将写好的apk安装包在局域网内部进行发布&#xff0c;具体实现非常简单&#xff0c;如下所示 2、效果图 进入到网站后&#xff0c;点击下载按…

正确认识:2374782-02-0,FAPI-4,成纤维细胞活化蛋白抑制剂

资料编辑|陕西新研博美生物科技有限公司小编MISSwu​ PART1----试剂基础信息​​ 【中文名称】成纤维细胞活化蛋白抑制剂 【英文名称】 FAPI-4 【结 构 式】 【CAS】2374782-02-0 【分子式】C40H54F2N10O10 【分子量】872.93 【沸点】1144.165.0 C(Predicted) 【密度】1.460.…

【力扣周赛】第 355 场周赛(构造二分答案异或前缀 状态压缩⭐)

文章目录 Q1&#xff1a;6921. 按分隔符拆分字符串&#xff08;双指针&#xff09;Q2&#xff1a;6915. 合并后数组中的最大元素&#xff08;倒序遍历贪心&#xff09;代码优化 Q3&#xff1a;6955. 长度递增组的最大数目&#x1f6b9;&#x1f6b9;&#x1f6b9;&#x1f6b9;…