2021-12-08 vue移动端卖座电影项目(八) 获取后台电影院数据,使用BetterScroll为电影院页面Cinema.vue设置滚动效果

文章目录

1.使用axios获取后台数据
2.把影院名遍历到页面中
3.better-scroll
- 3.1.安装命令`cnpm install --save better-scroll`
- 3.2. 引入和使用
4.使用Best-Scroll实现效果更好的滚动
- 4.1.$nextTick
- 4.2.增加滚动惯性
5.把显示高度设置为动态
6.完整代码

1.使用axios获取后台数据

Cinema.vue

  mounted() {axios({url:"https://m.maizuo.com/gateway?cityId=310100&ticketFlag=1&k=9269636",headers:{'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.1","e":"16662641254110824868151297"}','X-Host': 'mall.film-ticket.cinema.list'}}).then(res=>{console.log("获取影院数据",res.data.data.cinemas);})}

输出:

2.把影院名遍历到页面中

Cinema.vue

<template><div><ul><li v-for="data in datalist" :key="data.cinemaId">{{data.name}}</li></ul></div>
</template>
<script>
import axios from "axios"
export default {data() {return {datalist:[]};},mounted() {axios({url:"https://m.maizuo.com/gateway?cityId=310100&ticketFlag=1&k=9269636",headers:{'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.1","e":"16662641254110824868151297"}','X-Host': 'mall.film-ticket.cinema.list'}}).then(res=>{// console.log("获取影院数据",res.data.data.cinemas);this.datalist=res.data.data.cinemas;})}
};
</script>
<style lang="scss" scoped>
li{height: 50px;
}
</style>

效果

3.better-scroll

3.1.安装命令`cnpm install --save better-scroll`

3.2. 引入和使用

 // 引入BetterScrollimport BetterScroll from "better-scroll"...//使用new BetterScroll(".cinema");

4.使用Best-Scroll实现效果更好的滚动

4.1.$nextTick

vue中的nextTick主要用于处理数据动态变化后，DOM还未及时更新的问题，用nextTick就可以获取数据更新后最新DOM的变化

4.2.增加滚动惯性

    axios({...}).then(res=>{// console.log("获取影院数据",res.data.data.cinemas);this.datalist=res.data.data.cinemas;//nextTick:获取数据更新后最新DOM的变化(处理:数据动态变化后，DOM还未及时更新)this.$nextTick(()=>{// 调用betterscrollnew BetterScroll(".cinema",{//效果:增加了滚动惯性fade:true,interactive:false});})

5.把显示高度设置为动态

//html<div class="cinema" :style="mystyle">...</div>...//javsscriptexport default {data() {return {datalist:[],// 动态设置和改变高度mystyle:{height:"0px"}};},mounted() {console.log("页面高度是:",document.documentElement.clientHeight);this.mystyle.height=document.documentElement.clientHeight-50+"px";}}

6.完整代码

Cinema.vue

<template><div class="cinema" :style="mystyle"><ul><li v-for="data in datalist" :key="data.cinemaId">{{data.name}}</li></ul></div>
</template>
<script>
import axios from "axios"
// 引入BetterScrollimport BetterScroll from "better-scroll"
export default {data() {return {datalist:[],// 动态设置和改变高度mystyle:{height:"0px"}};},mounted() {console.log("页面高度是:",document.documentElement.clientHeight);this.mystyle.height=document.documentElement.clientHeight-50+"px";axios({url:"https://m.maizuo.com/gateway?cityId=310100&ticketFlag=1&k=9269636",headers:{'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.1","e":"16662641254110824868151297"}','X-Host': 'mall.film-ticket.cinema.list'}}).then(res=>{// console.log("获取影院数据",res.data.data.cinemas);this.datalist=res.data.data.cinemas;//nextTick:获取数据更新后最新DOM的变化(处理:数据动态变化后，DOM还未及时更新)this.$nextTick(()=>{// 调用betterscrollnew BetterScroll(".cinema",{//效果:增加了滚动惯性fade:true,interactive:false});})});}
};
</script>
<style lang="scss" scoped>
li{height: 50px;
}
.cinema{// height: 500px;// 把高度设置为动态overflow: hidden;position: relative;
}
</style>

2021-12-08 vue移动端卖座电影项目(八) 获取后台电影院数据,使用BetterScroll为电影院页面Cinema.vue设置滚动效果相关推荐

2022-11-17 vue移动端卖座电影项目(一) 获取后台数据
0.目标网页卖座电影 1.获取url数据位置:网络>复制>复制链接地址 2.获取电影列表数据字段获取:网络>标头>请求标头> 3.代码 views/nowPlayi ...
2021-11-27 vue移动端卖座电影项目(二) 封装选项卡,引入iconfont,nowPlaying获取数据后写样式
文章目录 1.封装选项卡 2.设置iconfont 3.nowPlaying获取数据后写样式 3.1.获取后台数据 3.2.从data对象获取电影海报,标题,评分 3.3.过滤data.actor,获 ...
2021-11-30 vue移动端卖座电影项目(四) 当前项目代码
文章目录 0.目录和package.json依赖 1.src/assets/iconfont(文件夹) 2.src/components/tabbar.vue 3.router/index.js 4. ...
2021-11-29 vue移动端卖座电影项目(三) vue项目中使用Swiper插件,Film页面设置轮拨图,nowPlaying页面设置样式
文章目录 1.引入swiper.vue组件目的步骤结果 2.把swiper-slide做成匿名插槽 3.Film.vue中通过axios请求获取后台轮播图片目的步骤因为现在原网站已取消轮拨 ...
2021-12-14 vue移动端卖座电影项目(十二) 使用mapState控制封装选项卡tabbar的显隐,以及回顾使用中央事件总线eventbus和vuex的state控制tabbar显隐的异同
文章目录 0.实现场景:进入详情页时,底部选项卡隐藏 1.使用中央事件总线控制tabbar的v-show的值 2.使用vuex的state控制tabbar的v-show的值 3.使用vuex的muta ...
2021-12-11 vue移动端卖座电影项目(十一) comingSoon用后台获取的数据写样式,以及用vuex的Action处理异步问题:切换FilmHeader中的两个标签时直接缓存数据
文章目录 0.vuex工作流程图复习 1.思路 2.axios获取后台数据(仿nowPlaying页即可) 3.用vuex的Action处理异步问题:切换FilmHeader中的"正在热映& ...
2021-12-22 vue移动端卖座电影项目(十五) 如何将项目上传到远程仓库
文章目录 0.git的介绍,官网,下载和安装介绍官网和下载地址和安装 2.git的使用命令 2.1.本地 2.2.上传到在线仓库:github,gitee等 2.3.下载 2.4.分支 3.上传v ...
2021-12-05 vue移动端卖座电影项目(六) 为详情页面Detail.vue获取后台数据并设置样式
1.带着id传到详情页面中效果:点击任一电影,跳转进Detail.vue页面时后面自动拼接上电影的filmId http://localhost:8081/#/Detail/6112 http:// ...
2021-12-07 vue移动端卖座电影项目(七) 封装轮拨组件,使之可用于详情页Detail,实现演职员表的轮拨和剧照的轮拨
文章目录 0.实现效果 1.封装详情页的轮拨组件DetailSwiper 2.perView:显示张数设置为动态,两个轮拨图分别初始化的方法:重命名并获取当前的class名 3.最终代码和效果代码 ...

2021-12-08 vue移动端卖座电影项目(八) 获取后台电影院数据,使用BetterScroll为电影院页面Cinema.vue设置滚动效果

文章目录

1.使用axios获取后台数据

2.把影院名遍历到页面中

3.better-scroll

3.1.安装命令`cnpm install --save better-scroll`

3.2. 引入和使用

4.使用Best-Scroll实现效果更好的滚动

4.1.$nextTick

4.2.增加滚动惯性

5.把显示高度设置为动态

6.完整代码

2021-12-08 vue移动端卖座电影项目(八) 获取后台电影院数据,使用BetterScroll为电影院页面Cinema.vue设置滚动效果相关推荐

最新文章

热门文章

2021-12-08 vue移动端卖座电影项目(八) 获取后台电影院数据,使用BetterScroll为电影院页面Cinema.vue设置滚动效果

文章目录

1.使用axios获取后台数据

2.把影院名遍历到页面中

3.better-scroll

3.1.安装命令cnpm install --save better-scroll

3.2. 引入和使用

4.使用Best-Scroll实现效果更好的滚动

4.1.$nextTick

4.2.增加滚动惯性

5.把显示高度设置为动态

6.完整代码

2021-12-08 vue移动端卖座电影项目(八) 获取后台电影院数据,使用BetterScroll为电影院页面Cinema.vue设置滚动效果相关推荐

最新文章

热门文章

3.1.安装命令`cnpm install --save better-scroll`