在制作类似于picker 弹框多选时使用 scroll-view，在安卓上很流畅，但是在ios13上很卡顿，滚动到顶部或底部直接卡死，而且滚动区域的事件也很卡顿，经常无效不能触发，本文解决方案是 使用swiper替代scroll-view

 

此弹框就是scroll-view  滑动卡顿

代替方案：

<template>
	<view>
		<uni-popup ref="multiplePop" type="bottom" style="width: 100%;">
			<view class="pop-box">
				<view class="top">
					<text class="btn" @click="closeMult">取消</text>
					<text class="title">{{ title }}</text>
					<text class="btn" @click="confirmMult">确定</text>
				</view>
				<template v-if="arrList != false">
					<swiper class="swiper-scroll" :vertical="true" :display-multiple-items="5">
						<swiper-item v-for="(item, index) in arrList" :key="index">
							<view class="scroll-item" @click="choose(item, index)">
								<text class="item-name">{{ item[defaultProps.label] }}</text>
								<image v-if="item.checked" src="../../static/warm-right.png"></image>
							</view>
						</swiper-item>
					</swiper>
				</template>
				<template v-else>
					<view class="empty-data">暂无数据</view>
				</template>
			</view>
		</uni-popup>
	</view>
</template>
<script>
import uniPopup from '@/components/uni-popup/uni-popup.vue';
export default {
	props: {
		// 开启动画
		title: {
			type: String,
			default: '请选择'
		},
		defaultProps: {
			type: Object,
			default() {
				return {
					label: 'label',
					value: 'value'
				};
			}
		},
		defaultSelected: {
			type: [Object, Array],
			default() {
				return [];
			}
		},
		arrList: {
			type: [Object, Array],
			default() {
				return [];
			}
		}
	},
	components: {
		uniPopup
	},
	data() {
		return {};
	},
	onLoad() {},
	watch: {},
	methods: {
		showMult() {
			let that = this;
			that.arrList.forEach(function(item) {
				that.$set(item, 'checked', false);
			});
			that.arrList.forEach(function(arrItem) {
				that.defaultSelected.forEach(function(deItem) {
					if (arrItem[that.defaultProps.value] == deItem[that.defaultProps.value]) {
						arrItem.checked = true;
					}
				});
			});
			that.$refs.multiplePop.open();
		},
		closeMult() {
			this.$refs.multiplePop.close();
			// this.$emit('clearChecked')
		},
		// 选择
		choose(item, index) {
			item.checked = !item.checked;
		},
		confirmMult() {
			let checkedArr = [];
			let that = this;
			checkedArr = that.arrList.filter(item => {
				return item.checked == true;
			});
			let sendArr = JSON.parse(JSON.stringify(checkedArr));
			sendArr = sendArr.filter(item => {
				delete item.checked;
				return item;
			});
			that.$emit('chioceList', sendArr);
			that.closeMult();
		}
	}
};
</script>

<style lang="scss" scoped>
/* cover */
.pop-box {
	background-color: #ffffff;
	height: 600rpx;
	width: 100%;
	display: flex;
	flex-direction: column;

	.top {
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30rpx;
		box-sizing: border-box;
		border-bottom: 1px solid #e8e8e8;

		.btn {
			color: #4e75ba;
		}

		text {
			font-size: 32rpx;
			font-weight: 400;
		}
	}
	// swiper begin
	.swiper-scroll {
		height: 500rpx;
		width: 100%;
		box-sizing: border-box;
		padding: 0 20rpx;
		.scroll-item {
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			border-bottom: 1px solid #e8e8e8;
			.item-name {
				font-size: 32rpx;
				font-weight: 400;
				color: #333333;
				margin-left: 30rpx;
			}
			image {
				width: 27rpx;
				height: 21rpx;
				position: absolute;
				right: 30rpx;
			}
		}
		.empty-data {
			width: 100%;
			text-align: center;
			padding: 60rpx 0;
			color: #999999;
			font-size: 28rpx;
		}
	}
}
</style>

效果：

 

 

 

 

 

 

 

 

 

 

 

趋近完美代替scroll-view