Vue常用插件

Vue常用插件

better-scroll

这一个插件主要是用于改善上拉与下滑的效果的

import "@/scss/index.scss";
import BScroll from "better-scroll";
export default {
  name:"index",
  data(){
    return {
      list:["张三","李四","王五","赵六","张三1","李四1","王五1","赵六1","张三2","李四2","王五2","赵六2","张三3","李四3","王五3","赵六3"]
    }
  },                            
  mounted(){
    this.$nextTick(()=>{
      if(!this.scroll){
        this.scroll=new BScroll(this.$refs.wrap,{        
          click:true
        });
        this.scroll.on("touchEnd",pos=>{
          if(pos.y>50){                  
            this.pullDownRefresh();
          }
          if(this.scroll.maxScrollY>pos.y+50){
            this.pullUpLoad();
          }
        })                                                          
      }                                                   
    });
  },
  methods:{
    pullDownRefresh(){
      console.log("下拉刷新");
      this.scroll.finishPullDown();
    },
    //上拉加载
    pullUpLoad(){
      console.log("上拉加载");
      this.scroll.finishPullUp();
    }
  },
  render(h){
    return (
      <div class="index" ref="wrap">
        <ul>
          {this.list.map(item=>{
            return <li>{item}</li>
          })}
        </ul>
      </div>
    )
  }
}

---

.index{
  position: absolute;
  width:100%;
  top:0px;
  left:0px;
  bottom: 0px;
  ul{
    list-style-type: none;
    margin:0;
    padding:0;
    li{
      height:40px;
      line-height: 40px;
      text-align: center;
      border-bottom:1px solid black;
    }
  }
}