<template>
<div>
<van-list
v-model="loading"
:finished="finished"
finished-text="没有更多了"
@load="onLoad"
:immediate-check="false"
offset="50"
>
<van-cell-group>
<van-cell center v-for="item in list" :key="item.filmId" @click="handleChangePage(item.filmId)" >
<van-image width="4.125rem" height="5.9365rem" :src="item.poster"/>
<div class="middle">
<div class="name" style="color: #191a1b;">{{item.name}}<span class="item_name">{{item.item.name}}</span></div>
<div :class="item.grade?'':'hidden'">观众评分:{{item.grade}}</div>
<div class="actors">主演:{{item.actors | actorFilter}}</div>
<div>{{item.nation}}|{{item.runtime}}分钟</div>
</div>
<template #right-icon>
<van-button class="btn_gp" type="primary">购票</van-button>
</template>
</van-cell>
</van-cell-group>
</van-list>
</div>
</template>
<script>
import axios from 'axios'
import Vue from 'vue'
import { List,Cell,CellGroup,Image,Button } from 'vant'
Vue.use(List)
Vue.use(Cell)
Vue.use(CellGroup)
Vue.use(Image)
Vue.use(Button)
Vue.filter('actorFilter',(data)=>{
if(data===undefined) return '暂无主演'
return data.map(item=>item.name).join(' ')
})
export default {
data(){
return {
list: [],
loading: false,
finished: false,
pageNum:2,
total:0
}
},
methods:{
handleChangePage(id){
// 方法一
// this.$router.push(`/detail/${id}`)
// 方法二,命名路由
this.$router.push({
name: 'detail',
params: {
id
}
})
},
onLoad() {
// 异步更新数据
// setTimeout 仅做示例,真实场景中一般为 ajax 请求
// 数据全部加载完成
if (this.list.length===this.total&&this.total!==0) {
this.finished = true;
return
}
axios({
url:`https://m.maizuo.com/gateway?cityId=440100&pageNum=${this.pageNum}&pageSize=10&type=1&k=557165`,
headers:{
'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.0","e":"16451159043441406970429441","bc":"440100"}',
'X-Host': 'mall.film-ticket.film.list'
}
}).then(res=>{
console.log(res.data.data.films)
// this.list = res.data.data.films
this.list = [...this.list,...res.data.data.films]
this.pageNum++
// 加载状态结束
this.loading = false;
})
},
},
mounted(){
axios({
url:'https://m.maizuo.com/gateway?cityId=440100&pageNum=1&pageSize=10&type=1&k=557165',
headers:{
'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.0","e":"16451159043441406970429441","bc":"440100"}',
'X-Host': 'mall.film-ticket.film.list'
}
}).then(res=>{
console.log(res.data.data.films)
this.list = res.data.data.films
this.total = res.data.data.total
})
},
}
</script>
设置immediate-check="false"
意思是不在初始化时立即执行滚动位置检查
因为页面刚加载的时候没有滚动条,所以如果这个值是true的话就会去执行onLoad函数。所以会请求两次。