当前位置: 首页 > news >正文

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

问题: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;}}}}}

相关文章:

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

问题&#xff1a;uniapp使用uni-swipe-action后右侧多了小于1px的间隙。且在真机上没有问题&#xff0c;但是在微信开发者工具中有问题。 代码如下&#xff1a;在滑动滑块或者点击这个区域时&#xff0c;就会出现问题。 <scroll-view :scroll-y"true" :style&quo…...

随手笔记——演示如何提取 ORB 特征并进行匹配

随手笔记——演示如何提取 ORB 特征并进行匹配 说明知识点源代码 说明 演示如何提取 ORB 特征并进行匹配 知识点 特征点由关键点&#xff08;Key-point&#xff09;和描述子&#xff08;Descriptor&#xff09;两部分组成。 ORB 特征亦由关键点和描述子两部分组成。它的关键…...

Python访问者模式介绍、使用

目录 一、Python访问者模式介绍 二、访问者模式使用 一、Python访问者模式介绍 访问者模式&#xff08;Visitor Pattern&#xff09;是一种行为型设计模式&#xff0c;它能够将算法与对象结构分离&#xff0c;使得算法可以独立于对象结构而变化。这个模式的主要思想是&#…...

深度学习实际使用经验总结

以下仅是个人在使用过程中的经验总结&#xff0c;请谨慎参考。 常用算法总结 图像分类 常用算法&#xff08;可作为其他任务的骨干网络&#xff09;&#xff1a;服务端&#xff1a;VGG、ResNet、ResNeXt、DenseNet移动端&#xff1a;MobileNet、ShuffleNet等适用场景&#x…...

【广州华锐互动】AR智慧机房设备巡检系统

AR智慧机房设备巡检系统是一种新型的机房巡检方式&#xff0c;它通过使用增强现实技术将机房设备、环境等信息实时呈现在用户面前&#xff0c;让巡检人员可以更加高效地完成巡检任务。 首先&#xff0c;AR智慧机房设备巡检系统具有极高的智能化程度。该系统可以根据用户设定的…...

关于Ubuntu 18.04 LTS环境下运行程序出现的问题

关于Ubuntu 18.04 LTS环境下运行程序出现的问题 1.运行程序时出现以下情况 2.检查版本 strings /lib/x86_64-linux-gnu/libc.so.6 |grep GLIBC_​ 发现Ubuntu18.04下的glibc版本最高为2.27,而现程序所使用的是glibc2.34,所以没办法运行, 3.解决办法 安装glibc2.34库, …...

「苹果安卓」手机搜狗输入法怎么调整字体大小及键盘高度?

手机搜狗输入法怎么调整字体大小及键盘高度&#xff1f; 1、在手机上准备输入文字&#xff0c;调起使用的搜狗输入法手机键盘&#xff1b; 2、点击搜狗输入法键盘左侧的图标&#xff0c;进入更多功能管理&#xff1b; 3、在搜狗输入法更多功能管理内找到定制工具栏&#xff0c…...

【人工智能】神经网络、前向传播、反向传播、梯度下降、局部最小值、多层前馈网络、缓解过拟合的策略

神经网络、前向传播、反向传播 文章目录 神经网络、前向传播、反向传播前向传播反向传播梯度下降局部最小值多层前馈网络表示能力多层前馈网络局限缓解过拟合的策略前向传播是指将输入数据从输入层开始经过一系列的权重矩阵和激活函数的计算后,最终得到输出结果的过程。在前向…...

一个tomcat部署两个服务的server.xml模板

一个服务的文件夹名字叫hospital&#xff0c;一个服务的文件夹叫ROOT&#xff0c;一个tomcat运行两个服务如何配置呢&#xff1f;注意一个appBase为webapps&#xff0c;另一个appBase为webapps1,当然也可以放在一个webappps里面。 <Service name"Catalina">&l…...

CentOS 7安装Docker

文章目录 安装Docker1.CentOS安装Docker1.1.卸载&#xff08;可选&#xff09;1.2.安装docker1.3.启动docker1.4.配置镜像加速 2.CentOS7安装DockerCompose2.1.下载2.2.修改文件权限2.3.Base自动补全命令&#xff1a; 3.Docker镜像仓库3.1下载一个镜像 安装Docker Docker 分为 …...

Nginx前端部署

1. 前端打包 执行如下命令&#xff0c;构建前端代码&#xff0c;构建成功后会在目录dist下生成构建完成的文件&#xff0c;将dist整个文件夹拷贝到服务器中 npm install npm run build dev 2.nginx配置 进入nginx目录/usr/local/nginx/conf&#xff0c;修改nginx.conf文件&a…...

17网商品详情API:使用与数据解析方法

17网是一家知名的电商平台&#xff0c;提供了大量的商品选择。开发者可以通过17网的商品详情API来快速获取和展示商品的详细信息。 17网商品详情API简介 介绍17网商品详情API的作用和目的&#xff0c;解释为何使用该API可以实现丰富的商品详情展示功能。 获取API访问权限 说…...

解决新版 Idea 中 SpringBoot 热部署不生效

标题 依赖中添加 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-devtools</artifactId> <scope>runtime</scope> <opt…...

Node.js: express + MySQL实现修改密码

实现修改密码&#xff0c;本篇文章实现修改密码只考虑以下几个方面&#xff1a; &#xff08;1&#xff09;&#xff0c;获取旧密码 &#xff08;2&#xff09;&#xff0c;获取新密码 &#xff08;3&#xff09;&#xff0c;将获取到的旧密码与数据库中的密码进行比对&#xf…...

ArduPilot之433电传模块集成之H7Dual飞控Rx/Tx丝印问题

ArduPilot之433电传模块集成之H7Dual飞控Rx/Tx丝印问题 1. 源由2. 安装3. 排查3.1 电气连接3.2 软件配置3.3 模块测试3.4 通信测试3.5 定位问题 4. 总结5. 参考资料 1. 源由 鉴于最近iNav最新固件6.1.1出现远航炸机&#xff0c;还是回到相对可靠的Ardupilot&#xff0c;在Mavl…...

python爬虫优化手段

当使用Python进行网络资源爬取时&#xff0c;会涉及到网络请求、数据处理和存储等操作&#xff0c;这些操作可能会对电脑性能产生一定的影响。以下是一些关于Python爬取网络资源的常见注意事项&#xff1a; 网络请求频率&#xff1a;频繁的网络请求可能会对电脑性能产生较大的影…...

Bootstrap-学习文档

Bootstrap 简介 什么是 Bootstrap&#xff1f; Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。 Bootstrap是前端开发中比较受欢迎的框架&#xff0c;简洁且灵活。它基于HTML、CSS和JavaScript&#xff0c;HTML定义页面元素&#xff0c;CSS定义页面布局&#x…...

【图像分类】CNN + Transformer 结合系列.1

介绍三篇结合使用CNNTransformer进行学习的论文&#xff1a;CvT&#xff08;ICCV2021&#xff09;&#xff0c;Mobile-Former&#xff08;CVPR2022&#xff09;&#xff0c;SegNetr&#xff08;arXiv2307&#xff09;. CvT: Introducing Convolutions to Vision Transformers, …...

Stable Diffusion - 扩展 SegmentAnything 和 GroundingDINO 实例分割算法 插件的配置与使用

欢迎关注我的CSDN&#xff1a;https://spike.blog.csdn.net/ 本文地址&#xff1a;https://blog.csdn.net/caroline_wendy/article/details/131918652 Paper and GitHub&#xff1a; Segment Anything: SAM - Segment Anything GitHub: https://github.com/facebookresearch/s…...

自然语言处理从入门到应用——LangChain:提示(Prompts)-[基础知识]

分类目录&#xff1a;《自然语言处理从入门到应用》总目录 模型编程的新方法是使用提示&#xff08;Prompts&#xff09;。提示指的是模型的输入。这个输入通常由多个组件构成。PromptTemplate负责构建这个输入&#xff0c;LangChain提供了多个类和函数&#xff0c;使得构建和处…...

JavaSec-RCE

简介 RCE(Remote Code Execution)&#xff0c;可以分为:命令注入(Command Injection)、代码注入(Code Injection) 代码注入 1.漏洞场景&#xff1a;Groovy代码注入 Groovy是一种基于JVM的动态语言&#xff0c;语法简洁&#xff0c;支持闭包、动态类型和Java互操作性&#xff0c…...

<6>-MySQL表的增删查改

目录 一&#xff0c;create&#xff08;创建表&#xff09; 二&#xff0c;retrieve&#xff08;查询表&#xff09; 1&#xff0c;select列 2&#xff0c;where条件 三&#xff0c;update&#xff08;更新表&#xff09; 四&#xff0c;delete&#xff08;删除表&#xf…...

什么是Ansible Jinja2

理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具&#xff0c;可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板&#xff0c;允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板&#xff0c;并通…...

让回归模型不再被异常值“带跑偏“,MSE和Cauchy损失函数在噪声数据环境下的实战对比

在机器学习的回归分析中&#xff0c;损失函数的选择对模型性能具有决定性影响。均方误差&#xff08;MSE&#xff09;作为经典的损失函数&#xff0c;在处理干净数据时表现优异&#xff0c;但在面对包含异常值的噪声数据时&#xff0c;其对大误差的二次惩罚机制往往导致模型参数…...

【VLNs篇】07:NavRL—在动态环境中学习安全飞行

项目内容论文标题NavRL: 在动态环境中学习安全飞行 (NavRL: Learning Safe Flight in Dynamic Environments)核心问题解决无人机在包含静态和动态障碍物的复杂环境中进行安全、高效自主导航的挑战&#xff0c;克服传统方法和现有强化学习方法的局限性。核心算法基于近端策略优化…...

R 语言科研绘图第 55 期 --- 网络图-聚类

在发表科研论文的过程中&#xff0c;科研绘图是必不可少的&#xff0c;一张好看的图形会是文章很大的加分项。 为了便于使用&#xff0c;本系列文章介绍的所有绘图都已收录到了 sciRplot 项目中&#xff0c;获取方式&#xff1a; R 语言科研绘图模板 --- sciRplothttps://mp.…...

人工智能--安全大模型训练计划:基于Fine-tuning + LLM Agent

安全大模型训练计划&#xff1a;基于Fine-tuning LLM Agent 1. 构建高质量安全数据集 目标&#xff1a;为安全大模型创建高质量、去偏、符合伦理的训练数据集&#xff0c;涵盖安全相关任务&#xff08;如有害内容检测、隐私保护、道德推理等&#xff09;。 1.1 数据收集 描…...

聚六亚甲基单胍盐酸盐市场深度解析:现状、挑战与机遇

根据 QYResearch 发布的市场报告显示&#xff0c;全球市场规模预计在 2031 年达到 9848 万美元&#xff0c;2025 - 2031 年期间年复合增长率&#xff08;CAGR&#xff09;为 3.7%。在竞争格局上&#xff0c;市场集中度较高&#xff0c;2024 年全球前十强厂商占据约 74.0% 的市场…...

简单介绍C++中 string与wstring

在C中&#xff0c;string和wstring是两种用于处理不同字符编码的字符串类型&#xff0c;分别基于char和wchar_t字符类型。以下是它们的详细说明和对比&#xff1a; 1. 基础定义 string 类型&#xff1a;std::string 字符类型&#xff1a;char&#xff08;通常为8位&#xff09…...

【笔记】结合 Conda任意创建和配置不同 Python 版本的双轨隔离的 Poetry 虚拟环境

如何结合 Conda 任意创建和配置不同 Python 版本的双轨隔离的Poetry 虚拟环境&#xff1f; 在 Python 开发中&#xff0c;为不同项目配置独立且适配的虚拟环境至关重要。结合 Conda 和 Poetry 工具&#xff0c;能高效创建不同 Python 版本的 Poetry 虚拟环境&#xff0c;接下来…...