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

这篇具有很好参考价值的文章主要介绍了uniapp使用uni-swipe-action后右侧多了小于1px的间隙。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

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

uniapp使用uni-swipe-action后右侧多了小于1px的间隙,uniapp,微信小程序,前端,uni-app,前端,javascript

<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;文章来源地址https://www.toymoban.com/news/detail-618908.html

	.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的间隙的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！