2020-04-08 项目一些小问题

项目开发中遇到的：

吸顶效果：{position: sticky;
    top: 44px;}
 指定弹性盒子的子元素换行方式
 弹性子项溢出的部分会被放置到新行:{
  display: flex;
    flex-wrap: wrap;
 }

BScroll 要使用的话加一层封装。

npm install better-scroll --save

    

      

       li{列表$}*30
      
    

        data(){
          return{
             scroll:null,
          }
        },
       methods:{
          beScrollToXY(x,y,time=500){ //给外部调用滚动到某位置
            this.scroll && this.scroll.scrollTo(x,y,time)
          },
          beScrollPullFinsh(){  //给外部调用结束上拉，可以进行下次上拉
            //数据加载完之后结束
           this.scroll &&  this.scroll.finishPullUp();
          },
          beScrollRefresh(){
            this.scroll && this.scroll.refresh();
          }
        },
        mounted() {//一定要挂载组件之后再创建scroll
          // this.bscrollView = new BScroll(this.$refs.wrapper,{
          //
          //  })
          this.scroll = new BScroll(this.$refs.homeScroll ,{
            probeType:3,
            pullUpLoad:true,
            click: true,
          })
          this.scroll.on('scroll',(position)=>{ //监听滚动事件
            // console.log(position);
            this.$emit('scrollPostion',position)
          })
          this.scroll.on('pullingUp',()=>{ //在上拉加载更多的时候执行
            console.log("上拉加载更多");
            //网络请求，请求更多数据
            this.$emit('pullingUp')


          })

        }

ref绑定，唯一
this.$refs.xxx

height：100vh,vh代表viewport height
动态计算calc(100%- 100px)
组件的监听 @click.native 不能直接监听点击事件
要使用bescroll 进行滚动的话最好是对scroll进行一个封装然后外面拿到scroll组件对象直接调用这个方法
      methods:{
          beScrollToXY(x,y,time=500){
            this.scroll.scrollTo(x,y,time)
          }
        },
       backClick(){
          this.$refs.homeScroll.beScrollToXY(0,0);
          }

获取屏幕的高宽

Vue.prototype.getViewportSize = function(){
  return {
    width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
    height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
  };
}

Be-Scroll高度问题

如果里面存在图片，异步加载，需要等图片加载完毕之后重新计算高度，调用bescroll的refresh()方法。
监听每一张图片加载完毕的方法。

vue里面监听

使用事件总线，跨组件传值

在组件中this.$bus.$emit(event,params)
在监听组件mouted方法里
this.$bus.$on(event,(params)=>{
        console.log("1")
      })
要注意vue默认没有bus这个属性，要在prototype里面加入
Vue.prototype.$bus = new Vue()

要使用this.$xxx或者document去取元素的时候尽量写在mouted里面而不是create，有可能拿到的对象元素为空。