当前位置: 首页 > 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;使得构建和处…...

springboot+vue基于web的学生宿舍预订分配管理系统的设计与实现

目录同行可拿货,招校园代理 ,本人源头供货商系统功能模块划分技术实现要点扩展性考虑项目技术支持源码获取详细视频演示 &#xff1a;文章底部获取博主联系方式&#xff01;同行可合作同行可拿货,招校园代理 ,本人源头供货商 系统功能模块划分 后端&#xff08;SpringBoot&am…...

无需安装jupyter notebook,在快马平台5分钟搭建你的第一个数据分析原型

今天想和大家分享一个快速搭建数据分析原型的经验。作为一个经常需要验证想法的数据分析师&#xff0c;最头疼的就是每次换电脑或重装系统后配置Jupyter Notebook环境的过程。最近发现了一个超省心的解决方案&#xff0c;不用本地安装就能直接开搞数据分析。 为什么选择云端Ju…...

前端开发者的Rust入门实战:手把手教你用Tauri为现有Vite项目添加桌面端能力

前端开发者的Rust入门实战&#xff1a;手把手教你用Tauri为现有Vite项目添加桌面端能力 当你的Vite项目需要突破浏览器沙箱限制时&#xff0c;Tauri提供了最优雅的解决方案。作为Electron的现代替代品&#xff0c;它允许前端开发者用熟悉的Web技术栈开发桌面应用&#xff0c;同…...

comsol地热井周期性抽采回灌 浅层地热水利用,非均匀周期循环抽住。 夏季注热抽冷冬季注冷抽...

comsol地热井周期性抽采回灌 浅层地热水利用&#xff0c;非均匀周期循环抽住。 夏季注热抽冷冬季注冷抽热 comsol论文复现&#xff0c;建模指导地热井的周期性调度像极了呼吸运动。我盯着屏幕上跳动的温度场云图&#xff0c;突然意识到这种冷热交替的运作模式&#xff0c;本质上…...

手把手教你用TI F28P65X开发板实现LED定时闪烁(基于CPU Timer2,含完整源码)

从零玩转TI F28P65X开发板&#xff1a;CPU Timer2实现可调频LED闪烁实战指南 刚拿到TI F28P65X开发板时&#xff0c;面对密密麻麻的引脚和复杂的开发环境&#xff0c;很多嵌入式新手会感到无从下手。本文将带你用最直观的方式&#xff0c;通过控制LED闪烁这个经典入门项目&…...

避开这5个坑!用MediaRecorder+Vue3实现高兼容性语音输入

Vue3MediaRecorder实战&#xff1a;5个关键技巧打造高兼容语音输入方案 在移动优先的时代&#xff0c;语音输入已成为提升用户体验的重要交互方式。但当你兴奋地在Vue3项目中集成MediaRecorder API时&#xff0c;可能会遇到iOS设备上的静默失败、Android机型上的格式兼容性问题…...

GTX1650也能跑!Windows11上OLLAMA+AnythingLLM本地部署Llama3保姆级教程

GTX1650也能跑&#xff01;Windows11上OLLAMAAnythingLLM本地部署Llama3保姆级教程 老旧硬件也能玩转大模型&#xff1f;当GTX1650这样的入门级显卡遇上Llama3这类前沿AI模型&#xff0c;很多人第一反应可能是"跑不动"。但经过实测&#xff0c;只要合理配置和优化&am…...

如何用开源工具实现3D打印钥匙自由?从参数测量到模型生成的实践路径

如何用开源工具实现3D打印钥匙自由&#xff1f;从参数测量到模型生成的实践路径 【免费下载链接】keygen OpenSCAD tools for generating physical keys 项目地址: https://gitcode.com/gh_mirrors/ke/keygen 在数字化制造蓬勃发展的今天&#xff0c;3D打印技术正逐步走…...

龙虾agent-browser获得chromium包问题

小龙虾非常火爆&#xff0c;在装agent-browser的时候&#xff0c;普通人往往被chromium的安装堵死了。网上的跨域安装方法一大堆&#xff0c;包括用镜像站点&#xff0c;国内所有的镜像站点都不行。但是真正能走通的&#xff0c;我到最后也没有试出来。最后只能自己想出一种手动…...

Janus-Pro-7B开发者案例:基于7860 Web UI构建内部AI知识助手

Janus-Pro-7B开发者案例&#xff1a;基于7860 Web UI构建内部AI知识助手 1. 项目背景与价值 企业内部知识管理一直是个头疼的问题。各种文档、图片、报告散落在不同系统中&#xff0c;员工想要快速找到需要的信息往往需要花费大量时间。传统的搜索工具只能基于文字匹配&#…...