乐趣区

关于uni-app:uniapp下拉触底节流

<template>

<view  >
<view class="clor" v-for="(item,index) in MathArr"  :key="index":style="'background: rgba('+item+');'" >
{{item}}    
</view>
</view>

</template>

<script>
export default {

    data(){
        return {MathArr:[],
            lond:''
        }
    },
methods:{getColor(){
    this.lond=true
    uni.showLoading({title:'正在加载中...'})
    const t=this
    uni.request({
        url:'https://www.escook.cn/api/color',
        method:'GET',
        success:({data:res})=> {t.MathArr=[...t.MathArr,...res.data]
        },
        complete:()=>{uni.hideLoading()
            this.lond=false
        }
    })
}
},
onLoad(){this.getColor()
},
onReachBottom() {if(this.lond==false){this.getColor()// 下拉到底 触发申请 而后新旧数组一起合并 失去第二组第三组..... 数据
    }
},



}

</script>

<style>

.clor{
    line-height: 100px;
    height: 100px;
    border-radius: 8px;
    border: solid 1px #E6F3F9;
    text-align: center;
}

</style>

退出移动版