俗不可耐
俗不可耐
  • 发布:2019-02-18 11:33
  • 更新:2020-04-27 11:07
  • 阅读:4759

uniapp onreachbottom 上拉一次要等3s渲染页面,上拉一次,再立即上拉一次就马上渲染出来了

分类:uni-app

uniapp onreachbottom 上拉一次要等3s渲染页面,上拉一次,再立即上拉一次就马上渲染出来了。我的数据节点以及逻辑并不复杂。只是一个列表页面。应该并不存在页面渲染与js阻塞造成的问题。求帮忙给思路和方向。感谢

<template>  
	<!-- Component Wrapper START -->  
	<view>  
		<!--swpier start -->  
		<home-swiper v-if="!showMenu" :banner-list="bannerList" />  
		<!--swpier stop -->  
		    
		<!-- 车辆列表 START -->  
		<view class="car_list_content">  
			<navigator v-for="carItem in carList" :key="carItem.id" :url="'/pages/CarDetail/CarDetail?car='+carItem.id">  
					  <view class="car-item-wrapper">  
					  <section  
					    class="car-cover-wrapper"  
					    :class="[carItem.type]">  
					    <view  
					      v-if="carItem.video"  
					      class="car-item-video"/>  
					    <view  
					      class="car-cover">  
								<image lazy-load="true" mode="aspectFill" :src="carItem.cover + '!/fw/440'"></image>  
					    </view>  
					  </section>  
					  <section class="car-info-wrapper">  
					    <h3 class="car-title">  
					      {{ carItem.title }}  
					    </h3>  
					    <view class="car-meta">  
					      <text>  
					        {{ carItem.location }} | {{ carItem.year }}年 | {{ carItem.mileage }}万公里 | {{ carItem.emission }}*  
					      </text>  
					    </view>  
					    <section class="car-price-location-wrapper">  
					      <view class="car-price">  
					        <text class="current">  
					          {{ carItem.price.current }}  
					        </text>  
					        <text class="original">  
					          指导价:{{ carItem.price.original }}万  
					        </text>  
					      </view>  
					      <view class="car-location">  
					        {{ carItem.position }}  
					      </view>  
					    </section>  
					  </section>  
					</view>		  
			</navigator>  
			<view class="uni-loadmore" v-if="showLoadMore">{{loadMoreText}}</view>  
		</view>  
		  
		<!-- -->  
		<!-- 车辆列表 END -->  
	</view>  
	<!-- Component Wrapper END -->  
</template>  
  
<script>  
  
	//轮播图组件  
	import HomeSwiper from "../../components/HomeSwiper.vue"  
	import { delay } from '../../utils/index.js'  
  
  
	export default {  
		name: "Home",  
  
		components: {  
			HomeSwiper  
		},  
  
		data() {  
			return {  
				carList: [],  
				bannerList: [],  
				brands:[],  
				loadMoreText: "加载中...",  
				showLoadMore: false,  
				max: 0,  
				showMenu:false  
			}  
		},  
  
  
		onLoad() {  
			this.initData()	  
			this.loadHomeBannerList()  
			this.loadBrands()  
		},  
  
		onUnload() {  
				this.max = 0  
				this.carList=[]  
				this.loadMoreText = "加载更多"  
				this.showLoadMore = true  
		},  
		  
		onReachBottom() {  
			console.log('onReachBottom'+this.max)  
			this.setDate();  
  
		},  
		onPullDownRefresh() {  
			console.log('onPullDownRefresh')  
			this.initData();  
			  
		},  
		methods: {  
			async loadBrands(){  
				const brands = await this.$store.dispatch("FETCH_BRANDS")  
				this.brands = brands  
				//console.log(brands)  
			},  
			async initData() {  
				this.carList=[]  
				this.max = 0  
				//this.max += 1  
				let params = Object.assign({}, this.option, {  
					start: this.max  
				})  
				//await delay(300)  
				const list = await this.$store.dispatch("FETCH_HOME_CAR_LIST", {  
					params  
				})  
				this.carList = list  
				console.log(list)  
				uni.stopPullDownRefresh();  
			},  
			async setDate() {  
				if(this.showLoadMore) return  
				let currentPage = this.max  
				currentPage++  
				this.showLoadMore = true  
				await delay(100)  
				let params = Object.assign({}, this.option, {  
					start: currentPage  
				})  
				const list = await this.$store.dispatch("FETCH_HOME_CAR_LIST", {  
					params  
				})			  
				if (list.length > 0) {  
					this.carList = this.carList.concat(list)  
					this.max = currentPage  
					this.showLoadMore = false  
					return  
				} else {  
					this.loadMoreText = "没有更多数据了!"  
					this.showLoadMore = true  
				}  
			},  
			async loadHomeBannerList() {  
				const list = await this.$store.dispatch("FETCH_HOME_BANNER_LIST")  
				//console.log(list)  
				this.loadingBanner = false  
				this.bannerList = list  
				//console.log(list)  
				//return list  
			}  
		}  
	}  
</script>  
  
<style lang="scss" scoped>  
  
	/* loadmore */  
	.uni-loadmore{  
		height:150upx;  
		line-height:100upx;  
		text-align:center;  
		width: 100%;  
		display: block;  
		z-index:9999;  
		// padding-bottom:30upx;  
		//background: #e55627  
	}  
  
	.text {  
		margin: 16upx 0;  
		width: 100%;  
		background-color: #fff;  
		height: 120upx;  
		line-height: 120upx;  
		text-align: center;  
		color: #555;  
		border-radius: 8upx;  
	}  
	.car_list_content{  
		display: block;  
	}  
</style>  

2019-02-18 11:33 负责人:无 分享
已邀请:
虫雪浓

虫雪浓 - 热爱生活,热爱编程

数据如果是来自接口的话,直接用 request 请求试试,先不要在 vuex 中去处理。看看还会不会出现这个问题。你全部用的 async-await 肯定是等所有的数据逻辑完毕,才会去渲染的。在setDate的函数作用域下肯定 是要阻塞的。

t***@163.com

t***@163.com - 80后

我试过,的确很慢,比原生慢很多

  • MacroCheng

    请问你的这个问题有解决了吗?


    2020-04-27 11:09

t***@163.com

t***@163.com - 80后

我的也是这种情况,三秒才加载数据!简直慢死了

t***@163.com

t***@163.com - 80后

耿神奇的是我调用了一个组件,刷新渲染后,样式丢失

t***@163.com

t***@163.com - 80后

定一下

MacroCheng

MacroCheng - 未遂的文艺青年

请问渲染慢的问题有解决没有?

该问题目前已经被锁定, 无法添加新回复