又是一年光棍節。。。剁手買了一條褲子。。。。

今天學習關於在vue裡面的better-scroll的使用：

  1.首先先安裝better-scroll cnpm i better-scroll

  2.然後要滑動的滑動體要定義在兩個div裡面，這樣才有效果，一定要注意啊

  3.進行匯入better-scroll        import Bscroll from 'better-scroll'

  4.然後在在周期函式裡面進行定義

<div class="list" ref="wrapper"> <!--ref可以幫助我們獲得dom物件-->
        <div class="second">
            //裡面放置要滑動的請求體
        </div>        
</div>
import Bscroll from 'better-scroll'
export default {
    name:'CityList',
    mounted() { 
            this.$nextTick(() => {  //判斷dom元素是否渲染了
                this.scroll = new Bscroll(this.$refs.wrapper) 
                console.log(this.scroll); 
            }) 
        } ,
    //接受City父親傳遞下來的元件
    props: {
        hot:Array,
        city:Object   //如果得到的是一個物件 則需要遍歷兩次 第一次遍歷可以得到 item 後面的是key值不是index了 
                        //第二次遍歷 就直接可以得到想要的資料了
    },
}

<style>
    .list {    /*為了把盒子定死  這個非常重要 如果不寫這些的話是沒有效果的 所以一定要寫明*/
        position: absolute;
        width: 100%;
        top:88px;
        left: 0;
        bottom: 0;
        overflow: hidden;
    }
</style>
 

使用better要注意的是：

better-scroll的滾動原理：

  父容器固定高度，並設定屬性 overflow:hidden，使得子元素高度超出容器後能被隱藏。

better-scroll使用的基本條件：

     必須包含兩個大的div，外層和內層div

     外層div設定可視的大小(寬或者高)-有限制寬或高

     內層div，包裹整個可以滾動的部分

     內層div高度一定大於外層div的寬或高，才能滾動

還可以用來製作輪播圖

//html的結構
<div class="slider" ref="slider">
  <div class="slider-group" ref="sliderGroup">
    <div v-for="item in slider">
        <a :href="item.linkUrl">
            <img :src="item.picUrl"/>
        </a>
    </div>
  </div>
</div>

//初始化slider輪播
this.slider = new Bscroll(this.$refs.slider,{
    scrollX: true,
    scrollY: false,
    momentum: false,
    snap: {
        loop: this.loop,
        threshold: 0.3,
        speed: 400
    },
    bounce: false,
    stopPropagation: true,
    click: true
}
 

還要注意的是：在使用axios進行遍歷的時候如果遍歷的是物件一定要注意：

 父親如果是物件，在進行初始化的時候，要用{}來表示   data () {city:{},}

  在兒子那裡可以使用 props: { city:Object}

  這樣vue就不會提示期望得到物件 而傳遞過來的是陣列的錯誤了

遍歷的過程如下：

<div class="area" v-for="(item, key) of city" :key="key">
                <div class="title">{{key}}</div>
                <div class="button-list">
                    <ul v-for="inneritem of item" :key="inneritem.id">
                        <li>{{inneritem.name}}</li>
                    </ul>
                </div>
</div>