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;
}
}
}
评论区