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

22 篇文章 1 订阅
13 篇文章 0 订阅

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值