第8章 旅游网站城市列表页面开发

better-scroll:滚动场景的插件。
https://github.com/ustbhuangyi/better-scroll
vue v-for 循环数组[{},{}] Array
v-for="item of list" :key="item.id"

vue v-for 循环对象{} 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的对象转换成数组
    letters () {
      const letters = []
      for (let i in this.cities) {
        letters.push(i)
      }
      return letters
    }
  }

js 对象转数组

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

indexof()：返回第一次出现的指定子字符串在此字符串中的索引
var str="Helloworld!"
document.write(str.indexOf("H") ) // 0 在第1个
document.write(str.indexOf("a") ) // -1，找不到
document.write(str.indexOf("d")) // 9，在第10个
forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。

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

image.png
State:存的是共用的数据
component改数据必须调用Actions做一些异步处理或批量的同步操作，Actions在去调用Mutations，只有通过Mutations才能修改共用的数据
有的时候component直接通过Mutations修改共用数据的值，不需要Actions
https://blog.csdn.net/baidu_36681154/article/details/79192667

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

localstorage：本地存储，类似于cookie

<keep-alive><keep-alive/>：路由发生切换，ajax都会重新被发送多次，用这个标签如果路由内容加载过一次，路由内容放到内存中。
当执行keep-alive就会多一个activated生命周期，当页面重新被执行的时候会执行activated钩子
【每当切换当前城市或者其他城市都会执行ajax，所以用keep-alive标签，keep-alive标签路由加载过一次会存放到内存中，所以切换城市无法显示切换后城市的内容，用keep-alive标签后会多一个activated钩子，这个钩子会在切换城市后显示】

scrollTop:
需要实现某个部位吸顶的效果。即，页面往上滑动，刚好到达该部位时，该部分，固定在顶部显示。
1、在mounted钩子中给window添加一个滚动滚动监听事件

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

2、添加这个handleScroll方法

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

3、监听元素到顶部的距离 并判断滚动的距离如果大于了元素到顶部的距离时，设置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>区域<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 组件激活时调用。该钩子在服务器端渲染期间不被调用。当页面存在缓存的时候执行该函数。
deactivated:
keep-alive 组件停用时调用。该钩子在服务器端渲染期间不被调用。在页面结束时触发该方法，可清除掉滚动方法等缓存。
当页面上添加一个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)
  }