Loading...
墨滴

恒星观测员340号

2021/03/17  阅读:20  主题:蔷薇紫

Vue2-卖座电影移动端学习笔记

Vue2-卖座电影移动端学习笔记

vuex 两大作用

  1. 非父子组件通信
  2. 公共数据备份,这时候往往用到异步
//store.js
actions: {
    getCinemaList (store, cityId) {
      // 返回Promise对象,便于之后的初始化better-scroll操作
      return http({
        url`/gateway?cityId=${cityId}&ticketFlag=1&k=8524925`,
        headers: {
          'X-Host''mall.film-ticket.cinema.list'
        }
      }).then(res => {
        store.commit('setCinemaList', res.data.data.cinemas)
      })
    }
  },

//Cinema.vue
this.$store.dispatch('getCinemaList'this.$store.state.cityId).then(res => {
    // this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它,然后等待 DOM 更新。
    this.$nextTick(() => {
    // 以下代码会等待DOM更新后才执行
      new BetterScroll('.cinema-list-wrap', {
        scrollbar: {
          fadetrue
        }
      })
    })
  })

动态路由

  {
    path'/detail/:id',
    name'Detail',
    component() => import('../views/Detail')
  },

页面重定向

  {
    path'*'// 通配符 优先级最低
    redirect'/film' // 页面重定向
  },

全局导航守卫(路由拦截)

const router = new VueRouter({
  base: process.env.BASE_URL,
  routes
})

router.beforeEach((to, from, next) => {
  const auth = ['/order''/money']
  if (auth.includes(to.fullPath)) {
    console.log('验证token')
    next('/login')
  } else {
    next() // 放行,不拦截
  }
})

axios 拦截器

const http = axios.create({
  baseURL'https://m.maizuo.com',
  timeout10000,
})

// Add a request interceptor
http.interceptors.request.use(function (config{
  // Do something before request is sent
  Toast.loading({
    message'加载中...',
    forbidClicktrue,
    overlaytrue
  })
  return config
}, function (error{
  // Do something with request error
  return Promise.reject(error)
})

// Add a response interceptor
http.interceptors.response.use(function (response{
  // Any status code that lie within the range of 2xx cause this function to trigger
  // Do something with response data
  Toast.clear()
  return response
}, function (error{
  // Any status codes that falls outside the range of 2xx cause this function to trigger
  // Do something with response error
  return Promise.reject(error)
})

处理307条数据,将其变成按城市首字母归类

const letterArray = []
const result = []
// 1. 生成26个字母
for (let code = 65; code < 91; code++) {
  letterArray.push(String.fromCharCode(code))
}
// 2.遍历
letterArray.forEach((letter) => {
  const temp = cities.filter(item => 
  item.pinyin.substring(01).toUpperCase() 
  === letter.toUpperCase())
  
  if (temp.length > 0) {
    result.push({
      type: letter,
      cities: temp
    })
  }
})
return result

Vue指令用法

<detail-header v-top> //v-top 就是一个Vue指令
  <van-nav-bar
    @click-left="$router.back()"
  >

    <template #left>
      <van-icon color="black" name="arrow-left" size="18" style="display:block;"/>
    </template>
    <template #title>
      <div style="font-size: 17px;">{{ filmInfo.name }}</div>
    </template>
  </van-nav-bar>
</detail-header>
Vue.directive('top', {
  inserted (el) {
    console.log(el)
    el.style.display = 'none'
    window.onscroll = () => {
      if ((document.body.scrollTop || document.documentElement.scrollTop) > 50) {
        el.style.display = 'block'
      } else {
        el.style.display = 'none'
      }
    }
  }
})

Vue过滤器

Vue.filter('actorsFilter', (actors) => {
  if (actors === undefinedreturn '暂无主演'
  // 将一个数组转化成了字符串
  return actors.map(actor => actor.name).join(' ')
})

Vue.filter('dateFilter', (date) => {
  return moment(date * 1000).format('YYYY-MM-DD')
})
<div class="label info-col">
  主演:{{ item.actors | actorsFilter }} /* 用法 */
</div>

恒星观测员340号

2021/03/17  阅读:20  主题:蔷薇紫

作者介绍

恒星观测员340号