Question

vux scroller怎么实现功能上的上拉刷新 下拉加载

Answer 1

方法/步骤1touchonmobileiScroll下拉刷新…llll1llll2llll3llll4llll5llll6llll7llll8llll9llll10llll11llll12llll13llll14llll15llll16llll17llll18llll19llll20llll21llll22llll23llll24llll25llll26llll27llll28上拉加载…2前面的许多meta标签是移动端适配以及对iphone的优化引用的文件包括less.js和iscroll-probe.js引用less是因为习惯了less的开发，其实跟css没区别iscroll-probe是上拉下拉的版本，iscroll5有4个版本3less文件*{margin:0;padding:0;font-family:"MicrosoftYaHei";}body{background:#fff;}header{position:absolute;top:0;left:0;width:100%;height:40px;z-index:2;background:#ffcc33;line-height:40px;vertical-align:middle;text-align:center;font-size:16px;color:#fff;}.wrapper{position:absolute;z-index:1;top:0;left:0;bottom:0;width:100%;background:#ccc;overflow:hidden;.scroller{position:absolute;z-index:1;width:100%;transform:translateZ(0);user-select:none;text-size-adjust:none;.pullDown{width:100%;height:40px;//margin-top:-40px;line-height:40px;vertical-align:middle;text-align:center;}ul{list-style:none;width:100%;text-align:left;li{padding:010px;height:40px;line-height:40px;vertical-align:middle;font-size:14px;background:#fff;border-bottom:1pxsolid#ddd;}}.pullUp{width:100%;height:40px;line-height:40px;vertical-align:middle;text-align:center;margin-bottom:-40px;}}}//载入画面.spinner{display:none;width:60px;height:60px;position:absolute;top:50%;left:50%;margin-top:-30px;margin-left:-30px;z-index:10;background:rgba(0,0,0,0);.double-bounce1,.double-bounce2{width:100%;height:100%;border-radius:50%;background-color:#000;opacity:0.6;position:absolute;top:0;left:0;-webkit-animation:bounce2.0sinfiniteease-in-out;animation:bounce2.0sinfiniteease-in-out;}.double-bounce2{-webkit-animation-delay:-1.0s;animation-delay:-1.0s;}@-webkit-keyframesbounce{0%,100%{-webkit-transform:scale(0.0)}50%{-webkit-transform:scale(1.0)}}@keyframesbounce{0%,100%{transform:scale(0.0);-webkit-transform:scale(0.0);}50%{transform:scale(1.0);-webkit-transform:scale(1.0);}}}4spinner是一个css3写的载入动画详细请参考css3动画less文件请自己编译5js文件varmyScroll;varpullDownFlag,pullUpFlag;varpullDown,pullUp;varspinner;functionpositionJudge(){if(this.y>40){//判断下拉pullDown.innerHTML="放开刷新页面";pullDownFlag=1;}elseif(this.y0;}document.addEventListener('touchmove',function(e){e.preventDefault();},false);6document.addEventListener('touchmove',function(e){e.preventDefault();},false);是iScroll的初始化7myScroll.on('scroll',positionJudge);myScroll.on("scrollEnd",action);对开始拖动和拖动结束的监听，这是iScroll5的一个坑，positionJudge和action都是function，但是如果直接以function(){}的方式写在里面的话，调用会出问题，所以要单独写在外面8编译一下less文件，找到iScroll-probe.js文件，就可以运行尝试了

追问

我调用的vux中的iscroller组件 样式什么都已经实现 功能上怎么实现还摸不着头绪 相当于一个回调 在哪里写呢？