参考文章: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>