2021-12-07 vue移动端卖座电影项目(七) 封装轮拨组件,使之可用于详情页Detail,实现演职员表的轮拨和剧照的轮拨

文章目录

0.实现效果
1.封装详情页的轮拨组件DetailSwiper
2.perView:显示张数设置为动态,两个轮拨图分别初始化的方法:重命名并获取当前的class名
3.最终代码和效果
- 代码
- 效果

0.实现效果

1.用同一个轮拨组件,详情页多个位置设置轮拨图
2.通过axios获取后台电影数据
3.演职员表的轮拨显示列数为4,剧照的轮拨显示列数是3
4.爬取的图片只显示其正中间部分(竖=>横)

1.封装详情页的轮拨组件DetailSwiper

新建views/Detail/DetailSwiper,把Film组件的轮拨图代码
Film/Swiper.vue

<template><!-- 重命名为filmswiper --><div class="swiper-container filmswiper"><div class="swiper-wrapper"><!-- <slot></slot> --><div class="swiper-slide"><img src="https://pic.maizuo.com/usr/2022/f6bef612cf73976c8bafeed2500a4f78.jpg" alt=""></div><div class="swiper-slide"><img src="https://pic.maizuo.com/usr/2022/e302538b376615750f5a4e3c660990be.jpg" alt=""></div><div class="swiper-slide"><img src="https://pic.maizuo.com/usr/2022/d80940fa8ba6f721f913f48d3490a465.jpg" alt=""></div><div class="swiper-slide"><img src="https://pic.maizuo.com/usr/2022/9fcfd07a00a434ecadfd11aea99cade4.jpg" alt=""></div><div class="swiper-slide"><img src="https://pic.maizuo.com/usr/2022/60015ebeea5a25376639fe3517590280.jpg" alt=""></div>       </div><!-- 如果需要分页器 --><div class="swiper-pagination filmPage"></div><!-- 分页器写在旁边:取新类名并设置样式 --></div>
</template>
<script>
// 引入Swiper
import Swiper from "swiper" //js
import "swiper/css/swiper.min.css"//css
export default {mounted() {console.log("swiper-mounted");new Swiper(".filmswiper",{loop: true,//自动轮拨autoplay:{delay:2000},// 显示分页pagination: {el: ".swiper-pagination",},})}
};
</script>
<style lang="scss" scoped>
img{width: 100%;
}
// 分页器靠右显示
.filmPage{text-align: right;
}
</style>

复制过来,
1.去掉分页器,去掉自动轮拨,去掉循环,添加如下功能

      slidePerView:3,//显示张数(列数)spaceBetween:30,//图片间距freeMode:true//启用自由模式功能:不会只翻一张,也不一定停在图片正中间

2.后台获取图片数据
Detail.vue

  // 获取后台数据:axios({// url:"https://m.maizuo.com/gateway?filmId=6112&k=1215097",url:`https://m.maizuo.com/gateway?filmId=${this.$route.params.id}&k=1215097`,headers:{'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.1","e":"16662641254110824868151297","bc":"310100"}',' X-Host': 'mall.film-ticket.film.info'}}).then(res=>{// console.log(res.data);this.filminfo=res.data.data.film;console.log("我是filminfo:",this.filminfo);});

3.swiper-slide(图片所在标签)做成匿名插槽
DetailSwiper.vue

     <div class="swiper-container filmswiper"><div class="swiper-wrapper"><slot></slot></div></div>

Detail.vue

      <swiper><div class="swiper-slide" v-for="data in filminfo.actors" :key="data.name"><img :src="data.avatarAddress"/><p>{{data.name}}</p></div>

2.perView:显示张数设置为动态,两个轮拨图分别初始化的方法:重命名并获取当前的class名

Detail.vue

      <swiper perview="3" class="actorswiper" myclassname="actorswiper"></swiper><swiper perview="4" class="photoswiper" myclassname="photoswiper"></swiper>

DetailSwiper.vue

export default {props:["perview","myclassname"],mounted() {// new Swiper(".filmswiper",{new Swiper("."+this.myclassname,{//slidePerView:3,slidePerView:this.perview,//spaceBetween:30,spaceBetween:this.myclassname==="actorswiper"?30:10,freeMode:true,})}
};

3.最终代码和效果

代码

DetailSwiper.vue

<template><div><div class="swiper-container photoswiper"><div class="swiper-wrapper"><slot></slot></div></div></div>
</template><script>import Swiper from "swiper"import 'swiper/css/swiper.min.css'export default {components: {},props: ['perview','myclassname'],mounted() {console.log(this.perview,this.myclassname);// new Swiper('.photoswiper',{new Swiper('.'+this.myclassname,{// slidesPerView:3,slidesPerView:this.perview,// spaceBetween:30,spaceBetween:this.myclassname=='actorswiper'?30:10,freeMode:true});}};
</script>
<style lang="scss" scoped>
.swiper-wrapper{img{width: 100%;}
}
</style>

Detail.vue

<template><!-- v-if="filminfo":若没有获取到后台数据则不进行初始渲染 --><div v-if="filminfo"><div id="posterWraper"><img :src="filminfo.poster" class="poster"></div><h2>{{filminfo.name}}</h2><h3>演职员表</h3><!-- 插入一个演职员表的轮拨图 --><!-- 每次显示三张图片,重命名为actorswiper,前者设置样式,后者设置行为 --><swiper perview="4" class="actorswiper" myclassname="actorswiper"><div class="swiper-slide" v-for="data in filminfo.actors" :key="data.name"><img :src="data.avatarAddress"/><p>{{data.name}}</p></div></swiper><h3>剧照</h3><!-- 插入一个剧照的轮拨图 --><!-- 每次显示四张图片,重命名为photoswiper --><swiper perview="3" class="photoswiper" myclassname="photoswiper"><div class="swiper-slide" v-for="(data,index) in filminfo.photos" :key="index"><img :src="data" /></div></swiper></div>
</template>
<script>
import axios from "axios"
import swiper from "../views/Detail/DetailSwiper"
export default {data(){return{filminfo:null}},props:['id'],components:{swiper},mounted(){axios({url:`https://m.maizuo.com/gateway?filmId=${this.$route.params.id}&k=1215097`,headers:{'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.1","e":"16662641254110824868151297","bc":"310100"}',' X-Host': 'mall.film-ticket.film.info'}}).then(res=>{this.filminfo=res.data.data.film;console.log("我是filminfo:",this.filminfo);});}
}
</script>
<style lang="scss" scoped>#posterWraper{height: 200px;overflow: hidden;}.poster{width: 100%;transform: translateY(-25%);}
</style>

效果

2021-12-07 vue移动端卖座电影项目(七) 封装轮拨组件,使之可用于详情页Detail,实现演职员表的轮拨和剧照的轮拨相关推荐

2021-11-27 vue移动端卖座电影项目(二) 封装选项卡,引入iconfont,nowPlaying获取数据后写样式
文章目录 1.封装选项卡 2.设置iconfont 3.nowPlaying获取数据后写样式 3.1.获取后台数据 3.2.从data对象获取电影海报,标题,评分 3.3.过滤data.actor,获 ...
2021-12-02 vue移动端卖座电影项目(五) 封装Film下的二级路由,FilmHeader实现吸顶效果
文章目录 1.封装Film下的二级路由目的/效果步骤 2.让FilmHeader.vue实现向下滑动时的吸顶效果(固钉效果) 思路步骤最终效果 3.离开Film页面时取消触发handleScr ...
2022-11-17 vue移动端卖座电影项目(一) 获取后台数据
0.目标网页卖座电影 1.获取url数据位置:网络>复制>复制链接地址 2.获取电影列表数据字段获取:网络>标头>请求标头> 3.代码 views/nowPlayi ...
2021-12-14 vue移动端卖座电影项目(十二) 使用mapState控制封装选项卡tabbar的显隐,以及回顾使用中央事件总线eventbus和vuex的state控制tabbar显隐的异同
文章目录 0.实现场景:进入详情页时,底部选项卡隐藏 1.使用中央事件总线控制tabbar的v-show的值 2.使用vuex的state控制tabbar的v-show的值 3.使用vuex的muta ...
2021-12-11 vue移动端卖座电影项目(十一) comingSoon用后台获取的数据写样式,以及用vuex的Action处理异步问题:切换FilmHeader中的两个标签时直接缓存数据
文章目录 0.vuex工作流程图复习 1.思路 2.axios获取后台数据(仿nowPlaying页即可) 3.用vuex的Action处理异步问题:切换FilmHeader中的"正在热映& ...
2021-12-10 vue移动端卖座电影项目(十) 使用状态管理模式vuex的state控制选项卡tabbar的显隐,mutation的用法,this.$store.commit()的两个参数
文章目录 0.vuex复习 1.引入 2.在state中存showTabbar后,直接可以引用 3.在Detail.vue的两个钩子函数中设置控制showTabbar的布尔值 4.效果:实现进入详情页 ...
2021-12-05 vue移动端卖座电影项目(六) 为详情页面Detail.vue获取后台数据并设置样式
1.带着id传到详情页面中效果:点击任一电影,跳转进Detail.vue页面时后面自动拼接上电影的filmId http://localhost:8081/#/Detail/6112 http:// ...
2021-11-30 vue移动端卖座电影项目(四) 当前项目代码
文章目录 0.目录和package.json依赖 1.src/assets/iconfont(文件夹) 2.src/components/tabbar.vue 3.router/index.js 4. ...
2021-11-29 vue移动端卖座电影项目(三) vue项目中使用Swiper插件,Film页面设置轮拨图,nowPlaying页面设置样式
文章目录 1.引入swiper.vue组件目的步骤结果 2.把swiper-slide做成匿名插槽 3.Film.vue中通过axios请求获取后台轮播图片目的步骤因为现在原网站已取消轮拨 ...

2021-12-07 vue移动端卖座电影项目(七) 封装轮拨组件,使之可用于详情页Detail,实现演职员表的轮拨和剧照的轮拨

文章目录

0.实现效果

1.封装详情页的轮拨组件DetailSwiper

2.perView:显示张数设置为动态,两个轮拨图分别初始化的方法:重命名并获取当前的class名

3.最终代码和效果

代码

效果

2021-12-07 vue移动端卖座电影项目(七) 封装轮拨组件,使之可用于详情页Detail,实现演职员表的轮拨和剧照的轮拨相关推荐

最新文章

热门文章