一.由于做移动端,所以先根据设计稿设置好设置rem
二、做轮播图
2.使用swiper引入轮播图
1)现在flims文件下自定义film-swiper组件,来显示大轮播,注意加上key值,不然会加载过早。
2)自定义一个film-swiper-item组件包裹着轮播数据
<film-swiper :key="datalist.length">
<film-swiper-item v-for="data in datalist" :key="data.filmId"
class="filmswiperitem">
<img :src="data.poster" alt="">
</film-swiper-item>
</film-swiper>
创建film-swiper和film-swiper-item组件
film-swiper-ltem组件
注意要引入swiper插件
导入组件flims页面
3.使用axios获取轮播图信息
这个json文件是本地保存的,为了就是方便设置轮播图
实现效果
三、做底部选项卡
1.先创建Tabbar组件,使用声明式导航,点击转去点击页面,active-class是动态给节点加入样式,当点击时候就给class加上样式
<ul>
<!--vue-router 声明式导航 -->
<li>
<router-link to="/films" active-class="beeactive">
<li class="iconfont icon-pay">电影</li>
</router-link>
</li>
<li>
<router-link to="/cinemas" active-class="beeactive">
<li class="iconfont icon-type">影院</li>
</router-link>
</li>
<li>
<router-link to="/register" active-class="beeactive">
<li class="iconfont icon-addressbook">我的</li>
</router-link>
</li>
</ul>
在app页面上引入Tabbar组件
<div class="box">
<tabbar ref="mytabbar" v-show="$store.state.isTabbarShow"></tabbar>
<!-- 路由容器 等于插槽类型 -->
<section><router-view></router-view></section>
</div>
效果图
四、电影导航组件
1.创建swiper-header组件
<ul>
<li>
<router-link to="/films/nowplaying">
<span class="beeactive">正在热映</span>
</router-link>
</li>
<li>
<router-link to="/films/comingsoon">
<span class="beeactive">即将上映</span>
</router-link>
</li>
</ul>
整体效果
五、正在热映的数据获取
由于网站没有跨域限制,所以可以拿取数据
不过需要设置请求头
所以使用axios进行封装
const http = axios.create({
baseURL: 'https://m.maizuo.com', //每次访问就是maizuo.com
timeout: 10000, //10秒超时
headers: {
'X-Client-Info':
'{"a":"3000","ch":"1002","v":"5.2.0","e":"16481780177384775358676993","bc":"440100"}'
}
})
可以获取到数据
接下来就是在正在热映的页面使用获取回来的数据
先把得到的电影flims数据给datalist
http({
url: `/gateway?cityId=${this.$store.state.cityId}&pageNum=1&pageSize=10&type=1&k=7388950`,
headers: {
'X-Host': 'mall.film-ticket.film.list'
}
}).then((res) => {
this.datalist = res.data.data.films
})
<van-cell
v-for="data in datalist"
:key="data.filmId"
@click="handleClick(data.filmId)"
>
<img :src="data.poster" alt="" />
<div class="titel">{
{ data.name }}</div>
<div class="content">
<div :class="data.grade ? '' : 'hidden'">
观众评分:<span style="color: orange">{
{ data.grade }} </span>
</div>
不过注意这个这里的演员数据是以对象形式存在,不能直接使用