Vue开发中的知识点

1-vant中的一些css样式无法修改的问题,尝试加入自己定义的类名 id 甚至加!important都无法更改

方法:在css的类名或id前面加上 /deep/ 深度递归会寻找到到相对应的标签.进行样式的更改

/deep/ .channel-tabs {
  .van-tab {
    border-right: 1px solid #edeff3;
    min-width: 200px;
    font-size: 30px;
    color: #777777;
  }

2-关于同一个页面中不同的组件切换后 浏览过的位置在返回的时候刷新重置的问题  移动端开发

 

原因 :  通过执行一下代码  知道了原因 

 控制台显示每个列表内容滚动的都是同一个元素 body, 因而切换标签时, 无法记录列表上一次的滚动条位置

尝试给父盒子设置高度100%发现依旧不行,因为没有被撑开高度,

视口单位：vw 和 vh，不受父元素影响

 height: 79vh;

  overflow-y: auto;

根据需求去更改vh的值,1vh=百分之一的视口高度,这样就相当于给了div固定的高度,

测试=>控制台中输入

function findScroller(element) {
  element.onscroll = function () {
     console.log(element)
  }
  Array.from(element.children).forEach(findScroller)
}

findScroller(document.body)

 

 经过测试,返回的值是div而不在是body   , 我们通过为每个标签的列表容器设置单独的滚动条, 这样切换不同标签时, 就不会影响相互的滚动位置

3-vant中的list列表

瀑布流滚动加载，用于展示长列表，当列表即将滚动到底部时，会触发事件并加载更多列表项。

官网的基础用法

List 组件通过 loading 和 finished 两个变量控制加载状态，当组件滚动到底部时，会触发 load 事件并将 loading 设置成 true。此时可以发起异步操作并更新数据，数据更新完毕后，将 loading 设置成 false 即可。若数据已全部加载完毕，则直接将 finished 设置成 true 即可。

load 事件：
        打开页面后list初始化,会执行一次load,加载数据

        如果数据少,一屏无法充满 会继续执行loda,直到铺满    

      - loading 属性：控制加载中的 loading 状态
        非加载中，loading 为 false，此时会根据列表滚动位置判断是否触发 load 事件
        加载中，loading 为 true，表示正在发送异步请求，此时不会触发 load 事件

      - finished 属性：控制加载结束的状态
        每次请求完数据后，需要手动将 loading 设置为 false，表示本次加载结束
        所有的数据加载结束，finished 为 true，此时不会触发 load 事件 根据条件进行更改状态

4-其他知识

/ 获取的数据
const { results } = data.data;
//this.list = [...results, ...this.list];  等同与   this.list.unshift(...results);


this.list.unshift(...results);
     

5-遇事不决就log  打印  打印就完事了, 打印你就直到你要什么了  打印就知道你写的是个啥 

        打印出undefined  写的是个寂寞

---