better-scroll轮播图的写法

第一步我们先将骨架搭起来啊，在使用前记得安装或者引入better-scroll

    <div id="app">
<!--        盛放轮播图的盒子， ref作用就是和选择器的作用差不多，都是获取元素的-->
        <div class="wrapper" ref="slider">
<!--        为了循环啊我们使用ul-->
            <ul class="content" ref="sliderGroup">
                <li>
<!--                    图片-->
                    <img src="./assets/images/dog.jpeg" />
                </li>
                <li>
                    <img src="./assets/images/mao.jpg" />
                </li>
            </ul>
            <!-- 这里可以放一些其它的 DOM，但不会影响滚动 -->
        </div>
    </div>

 

设置下css的样式

<style>
    *{
        padding: 0;
        margin: 0;
    }
    /*设置宽度就是设备的宽度，多出的不显示*/
    .wrapper{
        overflow: hidden;
    }
    .content li{
        list-style: none;
        float: left;
    }
    .content li img{
        width: 100%;
        height: 200px;
    }
</style>

js的逻辑

<script>

    // 引入better-scroll插件
    import BScroll from 'better-scroll'

    export default {
        name: 'app',
        components: {

        },
        created() {

        },
        mounted() {
            // 初始化方法，主要是为了设置盒子的宽度
            this.init();
            // 执行轮播的方法
            this.getBetterScroll();
        },
        methods:  {

            init() {
                // 获取元素下面的所有子元素
                this.children = this.$refs.sliderGroup.children;
                // 设置一个默认宽度，也就是设置class="content"的div的宽度
                let width = 0;
                // 获取class="wrapper"的宽度，这行代码的意思大概就是想要知道设备的宽度（或者就是盛放图片的盒子的宽度）
                let sliderWidth = this.$refs.slider.clientWidth;
                // 循环一下，获取有多少个子元素，设置子元素的宽度为设备的宽度，并且将所有子元素的宽度相加设置所有子元素横着的时候的宽度
                for (let i = 0; i < this.children.length; i++) {
                    let child = this.children[i];
                    child.style.width = sliderWidth + 'px';
                    width += sliderWidth;
                }
                // 最终设置宽度为这个
                this.$refs.sliderGroup.style.width = width + 'px'
            },

            getBetterScroll() {
                // 轮播插件的方法
                new BScroll('.wrapper', {
                    scrollX: true,
                    scrollY: false,
                    momentum: false,
                    snap: true,
                    snapLoop: true,
                    snapThreshold: 0.3,
                    snapSpeed: 400
                });
            }
        }
    }
</script>

 

 

下面是使用Vue写的完整的代码

<template>

    <div id="app">
<!--        盛放轮播图的盒子， ref作用就是和选择器的作用差不多，都是获取元素的-->
        <div class="wrapper" ref="slider">
            // 为了循环啊我们使用ul
            <ul class="content" ref="sliderGroup">
                <li>
<!--                    图片-->
                    <img src="./assets/images/dog.jpeg" />
                </li>
                <li>
                    <img src="./assets/images/mao.jpg" />
                </li>
            </ul>
            <!-- 这里可以放一些其它的 DOM，但不会影响滚动 -->
        </div>
    </div>
</template>

<script>

    // 引入better-scroll插件
    import BScroll from 'better-scroll'

    export default {
        name: 'app',
        components: {

        },
        created() {

        },
        mounted() {
            // 初始化方法，主要是为了设置盒子的宽度
            this.init();
            // 执行轮播的方法
            this.getBetterScroll();
        },
        methods:  {

            init() {
                // 获取元素下面的所有子元素
                this.children = this.$refs.sliderGroup.children;
                // 设置一个默认宽度，也就是设置class="content"的div的宽度
                let width = 0;
                // 获取class="wrapper"的宽度，这行代码的意思大概就是想要知道设备的宽度（或者就是盛放图片的盒子的宽度）
                let sliderWidth = this.$refs.slider.clientWidth;
                // 循环一下，获取有多少个子元素，设置子元素的宽度为设备的宽度，并且将所有子元素的宽度相加设置所有子元素横着的时候的宽度
                for (let i = 0; i < this.children.length; i++) {
                    let child = this.children[i];
                    child.style.width = sliderWidth + 'px';
                    width += sliderWidth;
                }
                // 最终设置宽度为这个
                this.$refs.sliderGroup.style.width = width + 'px'
            },

            getBetterScroll() {
                // 轮播插件的方法
                new BScroll('.wrapper', {
                    scrollX: true,
                    scrollY: false,
                    momentum: false,
                    snap: true,
                    snapLoop: true,
                    snapThreshold: 0.3,
                    snapSpeed: 400
                });
            }
        }
    }
</script>

<style>
    *{
        padding: 0;
        margin: 0;
    }
    /*设置宽度就是设备的宽度，多出的不显示*/
    .wrapper{
        overflow: hidden;
    }
    .content li{
        list-style: none;
        float: left;
    }
    .content li img{
        width: 100%;
        height: 200px;
    }
</style>