better-scroll:滾動場景的插件。
https://github.com/ustbhuangyi/better-scroll
vue v-for 循環(huán)數(shù)組[{},{}] Array
v-for="item of list" :key="item.id"

vue v-for 循環(huán)對象{} Object
v-for="(item, key) of list" :key="key"

const element = this.$refs[this.letter][0]
 // console.log(element)
this.scroll.scrollToElement(element)
element放的是dom元素或dom選擇器

scrollToElement滾動到相對應的位置

  computed: {
    // 把this.cities的對象轉換成數(shù)組
    letters () {
      const letters = []
      for (let i in this.cities) {
        letters.push(i)
      }
      return letters
    }
  }

js 對象轉數(shù)組

var arr = []
for (var i in object) {
    arr.push(object[i]); //屬性
    //arr.push(object[i]); //值
}
console.log(arr);

indexof()：返回第一次出現(xiàn)的指定子字符串在此字符串中的索引
var str="Helloworld!"
document.write(str.indexOf("H") ) // 0 在第1個
document.write(str.indexOf("a") ) // -1，找不到
document.write(str.indexOf("d")) // 9，在第10個
forEach() 方法用于調用數(shù)組的每個元素，并將元素傳遞給回調函數(shù)。

vuex：https://vuex.vuejs.org/

image.png

vue頁面跳轉：
1、<router-link to="/"></router-link>
2、this.$router.push('/')

localstorage：本地存儲，類似于cookie

<keep-alive><keep-alive/>：路由發(fā)生切換，ajax都會重新被發(fā)送多次，用這個標簽如果路由內(nèi)容加載過一次，路由內(nèi)容放到內(nèi)存中。
當執(zhí)行keep-alive就會多一個activated生命周期，當頁面重新被執(zhí)行的時候會執(zhí)行activated鉤子
【每當切換當前城市或者其他城市都會執(zhí)行ajax，所以用keep-alive標簽，keep-alive標簽路由加載過一次會存放到內(nèi)存中，所以切換城市無法顯示切換后城市的內(nèi)容，用keep-alive標簽后會多一個activated鉤子，這個鉤子會在切換城市后顯示】

scrollTop:
需要實現(xiàn)某個部位吸頂?shù)男Ч＜?，頁面往上滑動，剛好到達該部位時，該部分，固定在頂部顯示。
1、在mounted鉤子中給window添加一個滾動滾動監(jiān)聽事件

mounted () {
  window.addEventListener('scroll', this.handleScroll)
}

2、添加這個handleScroll方法

methods: {
  handleScroll () {
    var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
    console.log(scrollTop)
  }
},

3、監(jiān)聽元素到頂部的距離 并判斷滾動的距離如果大于了元素到頂部的距離時，設置searchBar為true,否則就是false

data () {
  return {
    showAbs: true
  }
},

handleScroll () {
  var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
  var offsetTop = document.querySelector('#searchBar').offsetTop
  if (scrollTop > offsetTop) {
    this.searchBarFixed = true
  } else {
    this.searchBarFixed = false
  }
},

寫一個該元素固定到頂部的樣式，isFixed（less寫法）

.searchBar{
  .isFixed{
    position:fixed;
    background-color:#Fff;
    top:0;
    z-index:999;
  }
  ul {
    WIDTH:100%;
    height: 40px;
    line-height: 40px;
    display: flex;
    li {
      font-size: 0.8rem;
      text-align: center;
      flex: 1;
      i {
        font-size: 0.9rem;
        padding-left: 5px;
        color: #ccc;
      }
    }
    border-bottom: 1px solid #ddd;
  }
}

然后將需要固定的元素的class與searchBar進行綁定，如果searchBar為true時，就應用這個isFixed樣式

<div class="searchBar" id="searchBar">
  <ul :class="searchBarFixed == true ? 'isFixed' :''">
    <li>區(qū)域<i class="iconfont icon-jiantouxia"></i></li>
    <li>價格<i class="iconfont icon-jiantouxia"></i></li>
    <li>房型<i class="iconfont icon-jiantouxia"></i></li>
    <li>更多<i class="iconfont icon-jiantouxia"></i></li>
  </ul>
</div>

當使用<keep-alive><keep-alive/>
activated:
keep-alive 組件激活時調用。該鉤子在服務器端渲染期間不被調用。當頁面存在緩存的時候執(zhí)行該函數(shù)。
deactivated:
keep-alive 組件停用時調用。該鉤子在服務器端渲染期間不被調用。在頁面結束時觸發(fā)該方法，可清除掉滾動方法等緩存。
當頁面上添加一個scroll事件時，需要remove scroll事件，不然會影響其他的頁面

  methods: {
    handleScroll () {
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      const offsetTop = document.querySelector('.header-abs').offsetTop
      const absWidth = document.querySelector('.header-abs').offsetHeight
      if (scrollTop > (offsetTop + absWidth)) {
        let opacity = scrollTop / 100
        opacity = opacity > 1 ? 1 : opacity
        this.opacityStyle = { opacity }
        this.showAbs = false
      } else {
        this.showAbs = true
      }
    }
  },
  activated () {
    window.addEventListener('scroll', this.handleScroll)
  },
  deactivated () {
    window.removeEventListener('scroll', this.handleScroll)
  }