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() 方法用于调用数组的每个元素，并将元素传递给回调函数。
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)
}
网友评论