uni-app快速入手 ——（10）ios上scroll-view局部滚动区域卡顿，滚动区域事件卡顿替代方案

心已赠人 2022-11-27 10:23 742阅读 0赞

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70][]

此弹框就是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>

效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70 1][]

趋近完美代替scroll-view

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70]: /images/20221124/fad41b2d21dd4064ac8a65582bd157f2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70 1]: /images/20221124/14bf51595bf84908932b0e4cbbf75f38.png