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

ゞ浴缸里的玫瑰 2021-07-25 01:11 777阅读 0赞

# 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： 孙组件  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYwMTk0OA_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYwMTk0OA_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYwMTk0OA_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYwMTk0OA_size_16_color_FFFFFF_t_70 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYwMTk0OA_size_16_color_FFFFFF_t_70 4]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYwMTk0OA_size_16_color_FFFFFF_t_70 5]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYwMTk0OA_size_16_color_FFFFFF_t_70 6]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYwMTk0OA_size_16_color_FFFFFF_t_70 7]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYwMTk0OA_size_16_color_FFFFFF_t_70 8]  
vant爬坑  
1.父组件要调用子组件的popup（vant的）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYwMTk0OA_size_16_color_FFFFFF_t_70 9]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYwMTk0OA_size_16_color_FFFFFF_t_70 10]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYwMTk0OA_size_16_color_FFFFFF_t_70 11]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYwMTk0OA_size_16_color_FFFFFF_t_70 12]  
自己记录项目仿写中

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYwMTk0OA_size_16_color_FFFFFF_t_70]: /images/20210724/be4f83993ee44b6194b029e036b5a2ba.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYwMTk0OA_size_16_color_FFFFFF_t_70 1]: /images/20210724/08859ef66ab74176859758ecbe459e3f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYwMTk0OA_size_16_color_FFFFFF_t_70 2]: /images/20210724/1e80f958fae141b280dd9ef5ce8234d8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYwMTk0OA_size_16_color_FFFFFF_t_70 3]: /images/20210724/4deeef41d184460cb249bf0ccef349c2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYwMTk0OA_size_16_color_FFFFFF_t_70 4]: /images/20210724/3056aed7cc63489c99173bdfb8bf889f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYwMTk0OA_size_16_color_FFFFFF_t_70 5]: /images/20210724/9bc9d2579f5449598cd8ccc3290fb3d2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYwMTk0OA_size_16_color_FFFFFF_t_70 6]: /images/20210724/c8b30a4a9a064d8088cf76d9dcff62bc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYwMTk0OA_size_16_color_FFFFFF_t_70 7]: /images/20210724/1465220b0c1448f8a909e543307f1027.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYwMTk0OA_size_16_color_FFFFFF_t_70 8]: /images/20210724/a4e33a29b8a14ce3824ef7d525449b2e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYwMTk0OA_size_16_color_FFFFFF_t_70 9]: /images/20210724/34ede9fc9ae647268b8b2dc533340a83.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYwMTk0OA_size_16_color_FFFFFF_t_70 10]: /images/20210724/45c9f260870a4a55b740969a45b21a95.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYwMTk0OA_size_16_color_FFFFFF_t_70 11]: /images/20210724/ef4061995e024632a8cd504a61469696.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYwMTk0OA_size_16_color_FFFFFF_t_70 12]: /images/20210724/e7c4c83fe21a4ae9a8810cf3a43c1809.png