当前位置: 首页 > 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;}}}}}

http://www.lryc.cn/news/98973.html

相关文章:

  • 随手笔记——演示如何提取 ORB 特征并进行匹配
  • Python访问者模式介绍、使用
  • 深度学习实际使用经验总结
  • 【广州华锐互动】AR智慧机房设备巡检系统
  • 关于Ubuntu 18.04 LTS环境下运行程序出现的问题
  • 「苹果安卓」手机搜狗输入法怎么调整字体大小及键盘高度?
  • 【人工智能】神经网络、前向传播、反向传播、梯度下降、局部最小值、多层前馈网络、缓解过拟合的策略
  • 一个tomcat部署两个服务的server.xml模板
  • CentOS 7安装Docker
  • Nginx前端部署
  • 17网商品详情API:使用与数据解析方法
  • 解决新版 Idea 中 SpringBoot 热部署不生效
  • Node.js: express + MySQL实现修改密码
  • ArduPilot之433电传模块集成之H7Dual飞控Rx/Tx丝印问题
  • python爬虫优化手段
  • Bootstrap-学习文档
  • 【图像分类】CNN + Transformer 结合系列.1
  • Stable Diffusion - 扩展 SegmentAnything 和 GroundingDINO 实例分割算法 插件的配置与使用
  • 自然语言处理从入门到应用——LangChain:提示(Prompts)-[基础知识]
  • Elasticsearch-增删改查数据工作原理
  • IO进、线程——守护进程
  • 通过v-for生成的input无法连续输入
  • Ventoy 使用教程图文详细版
  • 脚手架 --- command框架<一>
  • SpringBoot整合Zookeeper
  • Java和C#选哪个?
  • 首批!棱镜七彩通过汽车云-汽车软件研发效能成熟度模型能力评估
  • 【Docker】容器的数据卷
  • CentOS7安装jenkins
  • Hadoop的伪分布式安装方法