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

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 - 未遂的文艺青年

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

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