vue-better-scroll实现移动端下拉加载组件
1.下载安装better-scroll
npm i -S better-scroll
1.1安装完成之后,打开pacaage.json文件查看,是否有(better-scroll)
"dependencies": {
"axios": "^0.19.0",
//已安装better-scroll
"better-scroll": "^1.15.2",
"core-js": "^2.6.5",
"vue": "^2.6.10",
"vue-router": "^3.0.3",
"vuex": "^3.0.1"
},
2.在components下创建组件Scrooller
<template>
<div class="wrapper" ref="wrapper">
<!-- 内容分发 -->
<slot></slot>
</div>
</template> <script>
import BScroll from 'better-scroll';
export default {
name: 'Scroller',
// 父子通信
props : {
handleToScroll : {
type : Function,
// 默认一个空的方法 防止报错
default : function(){},
},
handleToTouchEnd : {
type:Function,
default: function(){}
}
},
mounted(){
//接收两个参数 1.找到最外层包裹的容器 dom元素 2.配置元素 true 开启配置
var scroll = new BScroll( this.$refs.wrapper,{
tap:true,
probeTybe: 1
}); scroll.on('scroll',(pos) => {
this.handleToScroll(pos);
}); scroll.on('touchEnd',(pos) => {
this.handleToTouchEnd(pos);
})
}
}
</script> <style scoped>
.wrapper{
height: 100%;
}
</style>
2.1在main.js中全局注册Scroller
// scroller全局组件
import Scroller from '@/components/Scroller/Scroller.vue'
Vue.component('Scroller',Scroller);
3.在views中引入Scroller组件
<template>
<div class="movie_body" ref="movie_body">
<!-- 父子间传递方法 -->
<Scroller :handleToScroll="handleToScroll" :handleToTouchEnd="handleToTouchEnd">
<ul>
<li class="pulldown">内容</li>
</ul>
</Scroller>
</div>
</template>
<script>
// import BScroll from 'better-scroll'; export default {
name: 'name',
data(){
return { movieList : [],
//加载状态
pullDownMsg : ''
}
},
mounted(){
this.axios.get('接口').then((res) => {
//处理数据并赋值给movieList
})
},
methods:{
//调用组件中的方法
handleToScroll(pos){
//y轴下拉高度大于30时,改变pullDownMsg
if( pos.y > 30){
this.pullDownMsg = '正在加载...'
}
},
//调用组件中的方法
handleToTouchEnd(pos){
if(pos.y > 30){
// 发起ajax
this.axios.get(’接口').then((res) => {
var msg = res.data.msg;
if(msg === 'ok'){
this.pullDownMsg = '加载完成!';
//延迟一秒
setTimeout(() =>{
this.movieList = res.data.list;
this.pullDownMsg = ''
},1000)
}
})
}
}
}
}
</script>
vue-better-scroll实现移动端下拉加载组件的更多相关文章
- web移动端下拉加载数据简单实现
//下拉加载在移动端会经常使用,有些小伙伴不清楚一些原理下面就简答的介绍一下 //首先需要监听window的滚动事件,下拉其实就是在监听window滚动事件 var pageNum = 1;//分页第 ...
- 基于Zepto移动端下拉加载(刷新),上拉加载插件开发
写在前面:本人水平有限,有什么分析不到位的还请各路大神指出,谢谢. 这次要写的东西是类似于<今日头条>的效果,下拉加载上啦加载,这次做的效果是简单的模拟,没有多少内容,下面是今日头条的移动 ...
- Vue自定义指令实现下拉加载:v-loadmore
和methods平级: directives: { loadmore: {//自定义指令: 下拉加载 bind(el, binding) { var p = 0; var t = 0; ...
- 前端提升生产力系列三(vant3 vue3 移动端H5下拉刷新,上拉加载组件的封装)
| 在日常的移动端开发中,经常会遇到列表的展示,以及数据量变多的情况下还会有上拉和下拉的操作.进入新公司后发现移动端好多列表,但是在看代码的时候发现,每个列表都是单独的代码,没有任何的封装,都是通过v ...
- vue实现pc端上拉加载功能,不兼容移动端
所用插件:Mock.js 这个只用到它简单的功能,拦截ajax请求. vue和axios,vue基础知识请看文档. axios类似于jquery的ajax方法. 以下是是该功能所有代码,其中mock的 ...
- 移动端好用的下拉加载上拉刷新插件 dropload插件
入了很多下拉加载上拉刷新的插件,但是感觉都不好用,知道最近遇到这款dropload的插件,瞬间打开新世界的大门啊,无卡顿简单易用可配置 <!doctype html> <html&g ...
- MUI - 上拉刷新/下拉加载
新闻信息列表必备的功能,支持Table,Ul等列表. 以下是DIV版本,在安卓端或者ios端必须使用双webview模式,传送门:http://dev.dcloud.net.cn/mui/pulldo ...
- 集成iscroll 下拉加载更多 jquery插件
一个插件总是经过了数月的沉淀,不断的改进而成的.最初只是为了做个向下滚动,自动加载的插件.随着需求和功能的改进,才有了今天的这个稍算完整的插件. 一.插件主功能: 1.下拉加载 2.页面滚动到底部自动 ...
- 下拉加载更多DEMO(js实现)
项目的一个前端页面展示已购买商品时,要求能下拉加载更多.花了点时间研究这个功能,以前没做过. 首先需要给div加scroll事件,监听滚动条滚动动作.那何时触发加载动作呢?当滚动条滚到底的时候.如何判 ...
随机推荐
- Python异常处理与上下文管理器
Python异常处理 异常与错误 错误 可以通过IDE或者解释器给出提示的错误opentxt('a.jpg','r') 语法层面没有问题,但是自己代码的逻辑有问题if age>18: print ...
- IOS UISwitch 控件
转自:http://my.oschina.net/wolx/blog/396680 一 UISwitch 简介 二 UISwitch 创建 三设置选中状态 四 添加监听 五 测试代码 5.1 代码 5 ...
- DAO模式多表联查
student类: package com.myschool.entity; public class student{ private int studentno; //学号 private S ...
- Open-Pit Mining
Description Open-pit mining is a surface mining technique of extracting rock or minerals from the ea ...
- nfs服务的讲解
第4章 nfs存储服务的搭建 4.1 nfs服务的介绍 4.1.1 nfs的作用 nfs服务器是一种远程网络传输的共享文件系统 节省web服务器的本地存储空间 用户存储在web服务器上面的资源,会通过 ...
- PyCharm设置Python版本,你肯定不知道!
前言本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理.作者:智小星 PyCharm默认会使用虚拟的Python解释器,即使 ...
- FlyWay工作原理
本文译自Flyway官方文档,原文地址https://flywaydb.org/getstarted/how 当你最开始将FlyWay指向一个空数据库时. 它会试着去查找schema历史表,如果此时数 ...
- 【Spring Boot】定时任务
[Spring Boot]定时任务 测试用业务Service package com.example.schedule.service; import org.springframework.ster ...
- Test 1022
T1 AERODROM (二分答案 TimeLimit: 1000MS Memory Limit: 32768KB \(N\)个登机口,办理登机业务,第\(i\)个窗口的单位办理时间为\(T_i\), ...
- 记录我的 python 学习历程-Day08 文件的操作
文件操作的初识 用 python 代码对文件进行各种操作. 基本构成: 文件路径:path 打开方式:读.写.追加.读写.写读-- 编码方式:utf-8 / gbk / gb2312-- f = op ...