Vue 详情模块 1

最新推荐文章于 2025-11-24 03:21:24 发布

原创最新推荐文章于 2025-11-24 03:21:24 发布 · 385 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

Vue 专栏收录该内容

60 篇文章

订阅专栏

Vue 渐进式JavaScript 框架基于Vue2的移动端项目：详情数据，吸顶效果及axios封装

详情

详情吸顶

实现吸顶效果：下划时，tab页被置顶在页面顶部。

使用粘性定位，当top等于0px时，固定在顶部。

在filmsView.vue中对film-header组件设置类样式。

示例如下：

<film-header class="sticky"></film-header>

类样式设定

<style lang="scss" scoped>
.filmSwiperItem {
  img {
    width: 100%;
  }
}
.sticky {
  position: sticky;
  top: 0;
  background: white;
}
</style>

说明：

position: sticky 是 CSS 的一种定位方式，

结合了相对定位（relative）和固定定位（fixed）的特性，

使元素在滚动到指定位置时固定显示。

它常用于实现导航栏吸顶、侧边栏固定等效果，

需配合 top、bottom 等偏移属性使用，

并依赖父容器的滚动机制。

吸顶效果：

详情数据

在详情detailView.vue页面的created函数中使用axios请求后端接口获取数据。

把前面页面传递过来的参数id，拼接到请求路径中。

注意：需要重新复制一下header中的那两个参数，与原来的header设置有所不同。

示例如下：

import axios from 'axios'

export default {
  created () {
    // 当前匹配的路由
    console.log('created', this.$route.params.id)
    // axios 利用 id发请求到详情接口，获取详情数据，布局页面
    axios({
      url: `/api/gateway?filmId=${this.$route.params.id}&k=6027054`,
      headers: {
        'X-Host': 'mall.film-ticket.film.info',
        'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.1","e":"17479694011920413022027777","bc":"130100"}'
      }
    }).then(res => {
      console.log(res.data)
      
    })
  }
}

Axios初次封装

接口的请求有很多都是公共的可以封装起来。

创建http.js

在src下创建util文件夹，在文件夹中再创建http.js文件。

封装方式1

封装请求函数

对于数据请求的封装，封装为专用的函数。

示例如下：

import axios from 'axios'

function httpForList () {
  return axios({
    url: '/api/gateway?cityId=130100&pageNum=1&pageSize=10&type=1&k=8043159',
    headers: {
      'User-Agent': 'Mozilla/5.0 (iPhone; CPU iPhone OS 14_6 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0.3 Mobile/15E148 Safari/604.1',
      'X-Host': 'mall.film-ticket.film.list',
      'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.1","e":"17479694011920413022027777"}'
    }
  })
}

function httpForDetail (id) {
  return axios({
    url: `/api/gateway?filmId=${id}&k=6027054`,
    headers: {
      'X-Host': 'mall.film-ticket.film.info',
      'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.1","e":"17479694011920413022027777","bc":"130100"}'
    }
  })
}

export default {
  httpForList,
  httpForDetail
}

使用请求函数

使用的时候，先引入http.js，然后调用就可以了。

修改原有NowPlaying页面请求。

示例如下：

import Vue from 'vue'
import http from '@/util/http'

// 定义过滤器处理主演名称
Vue.filter('actorName', (data) => {
  if (data === undefined) return '暂无主演'
  return data.map(item => item.name).join(' ')
})

export default {
  data () {
    return {
      datalist: []
    }
  },
  mounted () {
    http.httpForList().then((res) => {
      this.datalist = res.data.data.films
    })
  },

封装方式2

封装

import axios from 'axios'

const http = axios.create({
  baseURL: '',
  timeout: 10000,
  headers: {
    'X-Host': 'mall.film-ticket.film.list',
    'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.1","e":"17479694011920413022027777"}'
  }
})

export default http

调用

import Vue from 'vue'
import http from '@/util/http'

// 定义过滤器处理主演名称
Vue.filter('actorName', (data) => {
  if (data === undefined) return '暂无主演'
  return data.map(item => item.name).join(' ')
})

export default {
  data () {
    return {
      datalist: []
    }
  },
  mounted () {
    http({
      url: '/api/gateway?cityId=130100&pageNum=1&pageSize=10&type=1&k=8043159',
      headers: {
        'X-Host': 'mall.film-ticket.film.list'
      }
    }).then(res => {
      // console.log(res.data)
      this.datalist = res.data.data.films
    })
  },