vue六十：电影院售票项目案例之影院页面和使用Better-Scroll实现拖拉滚动

 

获取影院数据

渲染

 

要使用better-scroll实现的效果

下载Better-Scroll库：cnpm install --save better-scroll

 

使用better-scroll

 

动态设置div高度

 

cinema

<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\'
    import 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\'  // 减去底部tabbar的高度

            axios({
                url: `https://m.maizuo.com/gateway?cityId=110100&ticketFlag=1&k=563766`,
                headers: {
                    \'X-Client-Info\': \'{"a":"3000","ch":"1002","v":"5.0.4","e":"15610855429195524981146"}\',
                    \'X-Host\': \'mall.film-ticket.cinema.list\'
                }
            }).then(res => {
                console.log(res.data)
                this.datalist = res.data.data.cinemas

                // 等datalist更新到节点，再执行以下代码
                this.$nextTick(() => {
                    new BetterScroll(\'.cinema\', {
                        scrollbar: {
                            fade: true,
                            interactive: false
                        }
                    })
                })
            })
        }
    }
</script>

<style lang="scss" scoped>
    li {
        height: 50px;
    }

    .cinema {
        height: 500px;
        overflow: hidden;
        position: relative;
    }
</style>