三十五、影院页面（获取卖座官网的影院信息并显示）

Better-Scroll插件实现页面中拖动滚动、拉动属性功能（平滑滚动），以提高用户体验。

当div内容的高度超过div的高度时，使用该插件实现平滑滚动。

Better-Scroll的安装：

（1）具体实现过程

Cinema.vue

<template><!-- div的高度设置为“整个页面的高度” 减 “底部选项栏的高度”因此为其设置动态样式--><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'
//导入BetterScroll
import BetterScroll from 'better-scroll'
export default {data(){return{datalist:[],mystyle:{height:0}}},mounted () {//最外层div的高度设置为“整个页面的高度” 减 “底部选项栏的高度50px”this.mystyle.height = document.documentElement.clientHeight-50+'px';axios({url:"https://m.maizuo.com/gateway?cityId=110100&ticketFlag=1&k=9681514",headers:{'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"1615895162724483673423873","bc":"110100"}','X-Host': 'mall.film-ticket.cinema.list'}}).then(res=>{console.log(res.data)this.datalist = res.data.data.cinemas//Better-Scroll需要所有数据插到dom结点结束时，才可初始化。//this.$nextTick:所有数据插入到节点后，再执行其内容this.$nextTick(()=>{//.cinema：添加平滑滚动效果的div的class名//除了添加这个属性，还可以添加滚动条new BetterScroll(".cinema",{scrollbar:{//属性2，添加滚动条fade:true,interactive:false}})//Better-Scroll初始化})})}
}
</script>
<style lang="scss" scoped>li{height: 50px;}.cinema{overflow: hidden; //溢出隐藏 position: relative; //避免滚动条滚出div}
</style>

三十五、影院页面（获取卖座官网的影院信息并显示）相关推荐

Android开发笔记（三十五）页面布局视图
布局视图的类别布局视图有五类,分别是线性布局LinearLayout.相对布局RelativeLayout.框架布局FrameLayout.绝对布局AbsoluteLayout.表格布局TableL ...
openstack 管理三十五 - 利用 SQL 获取 tenant 当前资源情况
作用因为 openstack 命令行下, 没有办法直接获取资源使用情况通过 sql 语句获得 tenant(project) 当前的资源使用情况常见资源分别有 core, memory, dis ...
微信小程序把玩（三十五）Video API
原文:微信小程序把玩(三十五)Video API 电脑端不能测试拍摄功能只能测试选择视频功能,好像只支持mp4格式,值得注意的是成功之后返回的临时文件路径是个列表tempFilePaths而不是tem ...
东枝戛古舍利佛塔群（缅三十五）
东枝戛古舍利佛塔群(缅三十五) 撰文.摄影/张源 http://szju2000.blog.163.com/blog/static/16995144420115137370192/ 有2000 ...
[Python从零到壹] 三十五.图像处理基础篇之OpenCV绘制各类几何图形
欢迎大家来到"Python从零到壹",在这里我将分享约200篇Python系列文章,带大家一起去学习和玩耍,看看Python这个有趣的世界.所有文章都将结合案例.代码和作者的经验讲 ...
【零基础学Java】—System类（三十五）
[零基础学Java]-System类(三十五) java.lang.System 类中提供了大量的静态方法,可以获取与系统相关的信息或系统级操作在System类的API文档中,常用的方法有: pub ...
JAVA之旅（三十五）——完结篇，终于把JAVA写完了，真感概呐！
JAVA之旅(三十五)--完结篇,终于把JAVA写完了,真感概呐! 这篇博文只是用来水经验的,写这个系列是因为我自己的java本身也不是特别好,所以重温了一下,但是手比较痒于是就写出了这三十多篇博客了 ...
三十五、Fluent阻力系数问题
1．阻力系数定义阻力系数:阻力系数常表示为Cd是流体力学中的无因次量,用来表示物体在流体(例如水或是空气)中的阻力.阻力系数和物体的形状及其表面特性有关. 式中, Cd:阻力系数 F :阻力(阻力与 ...
【正点原子Linux连载】第三十五章 Linux内核顶层Makefile详解 -摘自【正点原子】I.MX6U嵌入式Linux驱动开发指南V1.0
1)实验平台:正点原子阿尔法Linux开发板 2)平台购买地址:https://item.taobao.com/item.htm?id=603672744434 2)全套实验源码+手册+视频下载地址: ...

三十五、影院页面（获取卖座官网的影院信息并显示）

（1）具体实现过程

三十五、影院页面（获取卖座官网的影院信息并显示）相关推荐

最新文章

热门文章