网易云项目 ----轮播图（BetterScroll 2.x 的使用）

用BetterScroll 2.x 和网易云的api接口实现轮播图

调用网易云api

下载安装网易云音乐的api接口

git  clone   https://github.com/Binaryify/NeteaseCloudMusicApi.git  /* 下载 */

cd NeteaseCloudMusicApi /* 进入项目的根目录*/

yarn 或者 npm install  /*安装依赖*/

node app.js   /* 运行项目，启动该 */

打开网易云音乐api http://musicapi.leanapp.cn/ 戳这!!!

router.js 和 main.js 的配置

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router/router'
import Axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios,Axios);
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
    router,
}).$mount('#app')

router.js

开发中有时候我们虽然设置的路径不一致，但是我们希望跳转到同一个页面，或者说是打开同一个组件。这时候我们就用到了路由的重新定向redirect参数。
就不会跳转网页 网页上会显示 /#/
redirect基本重定向
我们只要在路由配置文件中（/src/router/index.js）把原来的component换成redirect参数就可以了。我们来看一个简单的配置。

import Vue from 'vue'
import VueRouter from 'vue-router'
import banner from '../components/banner'
Vue.use(VueRouter);
const router = new VueRouter({
    linkActiveClass:'active',
    routes:[
        {path:'/',redirect:'/lunbotu'},]
});
export default router

组件banner.vue

BetterScroll 2.x的使用

https://better-scroll.github.io/docs/zh-CN/plugins/slide.html#%E4%BB%8B%E7%BB%8D
戳我!!!

NPM
BetterScroll 托管在 NPM 上，执行如下命令安装：

npm install @better-scroll/core@next --save

// or

yarn add @better-scroll/core@next

安装
npm install @better-scroll/slide@next --save

// or

yarn add @better-scroll/slide@next

附上banner 完整代码 开始讲解 其实别看代码这么长 基本都是文档照搬
找到示例
点击 </>

<template>
    <div class="slide" ref="slide">
        <ul class="slide-wrapper"  ref="slideWrapper">
            <!--//li 的盒子 嵌套img 图片-->
            <slot></slot>
        </ul>
        <div class="bannerDots" >
            <div
                    v-for="(item,index) in bannersData" :key="index"
                    :class="{dots:true,dotActive:index===currentPageIndex}">

            </div>
        </div>
    </div>
</template>

<script>
    import BScroll from '@better-scroll/core'
    import Slide from '@better-scroll/slide'

    BScroll.use(Slide)
    export default {
        data () {
            return {
                slide:null,
                currentPageIndex:0
            }
        },
        props:['bannersData'],
        methods: {
            init() {
                //必须在slide对象拿来做bscroll  要引用
                //初始化 better-scroll
                this.slide = new BScroll(this.$refs.slide, {
                    scrollX: true,
                    scrollY: false,
                    slide: {
                        loop: true,
                        threshold: 100
                    },
                    useTransition: true,
                    momentum: false,
                    bounce: false,
                    stopPropagation: true,
                    probeType: 2
                })
                //设置slide-item的样式
                this.children=this.$refs.slideWrapper.children;
                console.log(this.children);
                for (let i=0;i<this.children.length;i++){
                    this.children[i].classList.add('slide-item')
                }
                this.autoGoNext();
                this.slide.on('scrollEnd',()=>{
                    //检测如果滚动就触发回调函数
                    // console.log('scrollEnd');
                    this.autoGoNext()
                });
                this.slide.on('beforeScrollStart',()=>{
                    clearTimeout(this.playTimer)
                });
                this.slide.on('touchEnd',()=>{
                    this.autoGoNext();
                });
                this.slide.on('slideWillChange', (page) => {
                    this.currentPageIndex = page.pageX
                })
            },
            //L轮播功能
            nextPage() {
                this.slide.next()
            },
            autoGoNext() {
                clearTimeout(this.playTimer)
                this.playTimer = setTimeout(() => {
                    this.nextPage()
                }, 5000)
            }


        },

    // vue是数据驱动型 指的是东西放到页面上 呈现到页面上是需要时间的
        watch:{
            bannersData:function () {
                setTimeout(()=>{
                    this.init()
                },20)

            }
        }
    }

</script>

<style scoped>

        *{
            margin:0;
            padding: 0;
            list-style: none;
            resize: none;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;

        }
    
    .slide{
        width:100%;
        overflow: hidden;
    }

    .slide-item{
        width: 100%;
        float: left;

    }
    .slide-item img{
        width: 100%;
        display: block;
    }
    .bannerDots{
        position: relative;
        bottom: 18px;
        left: 80%;
        transform: translateX(-50%);
    }
    .dots{
        width: 8px;;
        height: 8px;
        border-radius: 50%;
        background: gray;
        float: left;
        margin-right: 8px;
    }

    .dotActive{
        background: red;
    }
</style>

$refs

ref 有三种用法：

1、ref 加在普通的元素上，用this.ref.name 获取到的是dom元素

2、ref 加在子组件上，用this.ref.name 获取到的是组件实例，可以使用组件的所有方法。

3、如何利用 v-for 和 ref 获取一组数组或者dom 节点

watch

    // vue是数据驱动型 指的是东西放到页面上 呈现到页面上是需要时间的
        watch:{
            bannersData:function () {
                setTimeout(()=>{
                    this.init()
                },20)

Vue.js 有一个方法 watch，它可以用来监测Vue实例上的数据变动。
示范一个无关的案例 但是可以大概了解一下watch的监测。

如果对应一个对象，键是观察表达式，值是对应回调，值也可以是方法名，或者是对象，包含选项。

<template>
<div>
    <input type="text" v-model="a">+<input type="text" v-model="b">= <input type="text" v-model="c">
     </div>
</template>

<script>
export default {
    data(){
       return{
           a:0,
           b:0,
           c:0
       }
    },
    watch:{
      a:function (newv,oldv) {
          this.c = Number(newv)+Number(this.b)
      }  ,
        b:function (newv,oldv) {
            this.c = Number(newv)+Number(this.a)
        }
    },
}
</script>

<style>

</style>

App.vue

<template>
    <div>
        <banner :bannersData="banners">
            <li v-for="item in banners " :key="item.bannerId ">
                <a href=""><img :src="item.pic" alt=""></a>
            </li>
        </banner>
    </div>
</template>

<script>
    import banner from './components/banner'
    export default {
        data () {
            return {
                bannerURL:'http://localhost:3000/banner?type=1',
                banners:[],//轮播图数据
            }
        },
        created(){
            this.axios.all([this.getBanner()])
                .then(
                    this.axios.spread(  (bannerData)=> {
                        this.banners = bannerData.data.banners;
                        // console.log(this.banners)
                    } ))
        },

        methods: {
            getBanner(){
                return this.axios.get(this.bannerURL)
            }
        },

        components: {
            banner
        },
    }
</script>

<style scoped>
</style>