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>
6 个回复
虫雪浓 - 热爱生活,热爱编程
数据如果是来自接口的话,直接用 request 请求试试,先不要在 vuex 中去处理。看看还会不会出现这个问题。你全部用的 async-await 肯定是等所有的数据逻辑完毕,才会去渲染的。在setDate的函数作用域下肯定 是要阻塞的。
t***@163.com - 80后
我试过,的确很慢,比原生慢很多
MacroCheng
请问你的这个问题有解决了吗?
2020-04-27 11:09
t***@163.com - 80后
我的也是这种情况,三秒才加载数据!简直慢死了
t***@163.com - 80后
耿神奇的是我调用了一个组件,刷新渲染后,样式丢失
t***@163.com - 80后
定一下
MacroCheng - 未遂的文艺青年
请问渲染慢的问题有解决没有?