VUE项目--卖座app_vue卖座网

一.由于做移动端，所以先根据设计稿设置好设置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>

不过注意这个这里的演员数据是以对象形式存在，不能直接使用