在制作类似于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