当前位置：首页 > news >正文

Vue 详情模块 1

news 2025/8/3 13:03:38

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

详情

详情吸顶

详情数据

Axios初次封装

创建http.js

封装方式1

封装请求函数

使用请求函数

封装方式2

封装

调用

总结

详情

详情吸顶

实现吸顶效果：下划时，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})},