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

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>