swiper初始化过早的解决办法 及 使用网络请求到数据之前初始为空报错问题解决

swiper初始化过早解决

<template>
    <div>
        <!-- 
	        swiper初始化过早,
	        在swiper标签上加个:key,随着数组长度变化根据Diff算法动态更新 
        -->
        <swiper :key="looplist.length">
            <div class="swiper-slide" v-for="data in looplist" :key="data.bannerId">
                <img :src="data.imgUrl"/>
            </div>
        </swiper>
        <div>film-导航头</div>
        <router-view></router-view>
    </div>
</template>

<script>
import swiper from '@/views/Film/Swiper'
import axios from 'axios'
export default {
  components: {
    swiper
  },
  data () {
    return {
      looplist: []
    }
  },
  mounted () {
    axios({
      url: 'https://m.maizuo.com/gateway?type=2&cityId=110100&k=5553387',
      headers: {
        'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"15610855429195524981146"}',
        'X-Host': 'mall.cfg.common-banner'
      }
    }).then(res => {
      console.log('轮播图获取', res.data)
      this.looplist = res.data.data
    })
  }
}
</script>


//组件定义:Swiper.vue
<template>
  <div class="swiper-container filmswiper">
    <div class="swiper-wrapper">
        <slot></slot>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination film-swiper-pagination"></div>
  </div>
</template>

<script>
import Swiper from 'swiper' // 是.js文件
import 'swiper/dist/css/swiper.css' // 注意还要引入swiper.css样式
export default {
  mounted () {
    // 找到类名为filmswiper的标签初始化
    new Swiper('.filmswiper', {
      loop: true,
      autoplay: {
        delay: 2000
      },
      // 如果需要分页器
      pagination: {
        el: '.swiper-pagination'
      }
    })
  }
}
</script>

<style lang="scss" scoped>
  .swiper-wrapper{
    img{
      width:100%;
    }
  }
</style>

初始化为空,请求数据还未拿到

<template>
    <!-- 重点:因为一开始filmInfo初始为null,当axios请求数据回来后,再显示该元素,防止空数据报错 -->
    <div v-if="filmInfo">
        <h2>{{filmInfo.name}}</h2>
    </div>
</template>

<script>
import axios from 'axios'
export default {
  props: ['myid'],
  data () {
    return {
      filmInfo: null
    }
  },
  mounted () {
    // console.log('要获得的跳转id详情信息', this.$route.params.myid, this.myid)
    axios({
      url: `https://m.maizuo.com/gateway?filmId=${this.myid}&k=4359832`,
      headers: {
        'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"15610855429195524981146"}',
        'X-Host': 'mall.film-ticket.film.info'
      }
    }).then(res => {
      this.filmInfo = res.data.data.film
    })
  }
}
</script>

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值