vant下拉刷新,第一次进去,请求了两次

<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函数。所以会请求两次。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值