下拉列表加载组件数据（利用vant的UI框架）
程序员文章站
2022-03-02 14:46:07
上面标签部分下面数据部分代码详情
上面标签部分
下面数据部分
代码详情
<template>
<div class="nowplaying">
<!-- 直接引入vant插件内的代码 -->
<van-list
v-model="loading"
:finished="finished"
finished-text="没有更多了"
@load="onLoad"
>
<Films :films="films" type="nowplaying"></Films>
</van-list>
</div>
</template>
<script>
import {instance1} from '@/utils/http.js'
import {mapState} from 'vuex'
import Films from '@/components/films/index.vue'
import Vue from 'vue';
import { List } from 'vant'; //引入插件
Vue.use(List); //注册插件
export default {
components:{
Films
},
data(){
return {
films:[],
pageNum:1,
loading: false,
finished: false,
}
},
// created(){
// instance1.get(`/gateway?cityId=${this.cityId}&pageNum=${this.pageNum}&pageSize=10&type=1&k=4482436`,{
// headers:{
// 'X-Host': 'mall.film-ticket.film.list'
// }
// }).then(res=>{
// this.films = res.data.data.films
// console.log(this.films)
// })
// },
methods:{ //将原本created内的数据请求放到onLoad内进行请求
onLoad(){ //设置一个默认页数为1
instance1.get(`/gateway?cityId=${this.cityId}&pageNum=${this.pageNum}&pageSize=10&type=1&k=4482436`,{
headers:{
'X-Host': 'mall.film-ticket.film.list'
}
}).then(res=>{ //将每次请求后的数据与之前的数据进行拼接
this.films = this.films.concat(res.data.data.films)
this.pageNum++ //每请求完一次数据后页数进行+1
if(this.films.length == res.data.data.total){ //判断如果请求数据的数量与数据的总数量相同
this.finished = true //将显示上面的文字“没有更多了”
}
this.loading = false //将加载关掉
})
}
},
computed:{
...mapState("city",["cityId"])
}
}
</script>
<style lang="scss" scoped>
.nowplaying{
padding-bottom:0.3rem;
}
</style>
本文地址：https://blog.csdn.net/weixin_46547740/article/details/109256527
上一篇： viewpager2 动态刷新效果