解决uni-app props 传递数组修改后不能使用问题【小程序和app上props属性修改后都无效】

参考文章：https://www.jianshu.com/p/09fa81a58014

3.1 解决办法：

使用中间临时数组(tempList(),在created()时就开始将值传递给临时数组，防止出现延时情况，后续单独操作临时数组即可。

export default {
        props: ['items'],
        data() {
            return {
                tempList: []
            }
        },
        methods: {
            showMarquee: function() {
                let _this = this;
                setTimeout(function() {
                    _this.tempList.push(_this.tempList[0]);
                    _this.tempList.shift()
                }, 500)
            },
        },
        created() {
            this.tempList = this.items
        }
    }

附上本人案例分享：

<!--【屏幕上下左右滑动的swiper+scroll-view封装】-->

<template>
	<view class="own-swiper-scroll-Xy">
		<!--水平方向滑动-->
		<swiper :style="{ height: swiperHeight }" :current="index" @change="swiperChange">
			<block v-for="(barItems, barIndex) in propsOfTempList" :key="barIndex">
				<swiper-item>
					<!--垂直方向滚动-->
					<scroll-view :style="{ height: swiperHeight }" :scroll-y="true" class="grace-scroll-y" @scrolltolower="scrollToLower(barIndex)">
						<view class="items">
							<view>{{barItems.items}}</view>
							<block v-for="(item, itemIndex) in barItems.items" :key="itemIndex">
								<short-video-or-image :item="item" :index="itemIndex"></short-video-or-image>
							</block>
							<view class="load-more">{{ barItems.load_more }}</view>
						</view>
					</scroll-view>
				</swiper-item>
			</block>
		</swiper>
	</view>
</template>

<script>
import shortVideoOrImage from '@/common/own/components/short-video-or-image.vue';
import logo from '@/static/logo.png';
import index_image from '@/static/img/index.jpg';
export default {
	async mounted() {
		try {
			let arr = await uni.getSystemInfo();
			this.swiperHeight = arr[1].windowHeight - 50 + 'px';
			console.log(this.swiperHeight);
		} catch (e) {
			//TODO handle the exception
		}
	},
	created(){
		//创建一个临时数组来解决uni-app props传递数组修改后不能使用问题【app和小程序端如此,H5不影响】
		this.propsOfTempList = this.tabBars
	},
	data() {
		return {
			swiperHeight: null,
			
			propsOfTempList:[]
		};
	},
	methods: {
		swiperChange(e) {
			this.$emit('swiper-current', e.detail.current);
		}
	},
	props: {
		tabBars: Array,
		index: Number
	},
	methods: {
		scrollToLower(index) {
			let tabBarItems = this.propsOfTempList[index];

			if (tabBarItems.items.length > 8) {
				tabBarItems.load_more = '没有更多数据了...';
				return;
			}

			if (tabBarItems.load_more === '上拉加载更多...') {
				tabBarItems.load_more = '加载中...';
				setTimeout(() => {
					tabBarItems.items.push({
						title: '上拉加载的数据data',
						username: 'kirin',
						times: '3.9万',
						time: '00:00',
						type: 'image',
						logo: logo,
						index_image: index_image
					});
					tabBarItems.load_more = '上拉加载更多...';
				}, 1000);
			}
		}
	},
	components: {
		shortVideoOrImage
	}
};
</script>

<style lang="scss" scoped>
.items .load-more {
	text-align: center;
	margin: 5upx;
}
</style>