Vue+vant网易云音乐爬坑总结

js原生

原生目录：1.添加类名
2.使用了overflow-Y:scroll和height:100%; 操作scroll对象判断是否到底
Vue目录：1.子传父 写法
2.父传子，子传孙（用$attrs属性）和 inheritAttrs属性的用法
vant+vue目录：
1.父组件要调用子组件的popup（vant的）

1.添加类名

// 添加类名
this.$refs.ok.classlist.add('none');
// 删除类名
this.$refs.ok.classlist.remove('none');

2.使用了overflow-Y:scroll和height:100%; 操作scroll对象判断是否到底

.square {
  padding: 10px;
  height:300px;
  overflow-Y: scroll;
  }

原来的写法

    window.addEventListener("scroll",function(){
      let scrollTop = document.documentElement.scrollTop
      let scrollHeight = document.documentElement.scrollHeight
      let clientHeight = document.documentElement.clientHeight
      if(scrollTop + clientHeight == scrollHeight){
        console.log('到底了')
      }
    })

但是这样滚轮全局都能用滚轮不是分开来的，要的效果是一个页面的单个块滑动不影响全局

解决：单个块控制滑动

    this.$refs.square.addEventListener("scroll",function(e){
      // console.log(col_leftHeight < col_rightHeight)
      let scrollTop = e.target.scrollTop
      let scrollHeight = e.target.scrollHeight
      let clientHeight = e.target.clientHeight
      if(scrollTop + clientHeight == scrollHeight){
        console.log('到底了')
      }

Vue 爬坑

1.子传父 写法

/*父组件*/
<van-popup v-model="vantObj.show" position="bottom" :style="{ height: '100%' }">
   <music-main @send="close"></music-main>
</van-popup>

    methods:{
      close(value){
        this.vantObj.show = value
      }
    }

// 子组件
 <van-icon class="icon rotate90 mar-16" name="down" @click="back"/>
 
     methods:{
      // 点击返回
      back(){
        this.$emit('send',false)
      }
    }

2.父传子，子传孙（用$attrs属性）和 inheritAttrs属性的用法

遇到问题：父组件要传数据给孙组件每次都用props递归的传入麻烦
解决如下：
index： 父组件
tops： 子组件
sunzujian： 孙组件









vant爬坑
1.父组件要调用子组件的popup（vant的）




自己记录项目仿写中