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>