iscroll-probe实现下拉刷新和下拉加载效果

需要注意的是外部wrapper的高度,以及all的高度,须是>100%。

附加一个css3 的loading

.dengl-spinner {

width: 0.682rem;

height: 0.682rem;

position: relative;

position: absolute;

z-index: -1;

left: 50%;

margin-left: -0.341rem;

top: 2.5rem;

}

.dengl-spinner1{

width: 0.682rem;

height: 0.682rem;

position: relative;

position: fixed;

z-index: -1;

left: 50%;

margin-left: -0.341rem;

bottom: 1.5rem;

}

.dengl-cube1, .dengl-cube2 {

background-color: #f2513f;

width: 0.682rem;

height: 0.682rem;

position: absolute;

top: 0;

left: 0;

-webkit-animation: cubemove 1.8s infinite ease-in-out;

animation: cubemove 1.8s infinite ease-in-out;

}

.dengl-cube2 {

-webkit-animation-delay: -0.9s;

animation-delay: -0.9s;

}

@-webkit-keyframes cubemove {

25% {

-webkit-transform: translateX(1rem) rotate(-90deg) scale(0.5)

}

50% {

-webkit-transform: translateX(1rem) translateY(1rem) rotate(-180deg)

}

75% {

-webkit-transform: translateX(0px) translateY(1rem) rotate(-270deg) scale(0.5)

}

100% {

-webkit-transform: rotate(-360deg)

}

}

@keyframes cubemove {

25% {

transform: translateX(1rem) rotate(-90deg) scale(0.5);

-webkit-transform: translateX(1rem) rotate(-90deg) scale(0.5);

}

50% {

transform: translateX(1rem) translateY(1rem) rotate(-179deg);

-webkit-transform: translateX(1rem) translateY(1rem) rotate(-179deg);

}

50.1% {

transform: translateX(1rem) translateY(1rem) rotate(-180deg);

-webkit-transform: translateX(1rem) translateY(1rem) rotate(-180deg);

}

75% {

transform: translateX(0px) translateY(1rem) rotate(-270deg) scale(0.5);

-webkit-transform: translateX(0px) translateY(1rem) rotate(-270deg) scale(0.5);

}

100% {

transform: rotate(-360deg);

-webkit-transform: rotate(-360deg);

}

}

上下两个

<div class="dengl-spinner" style="top:17rem">

<div class="dengl-cube1"></div>

<div class="dengl-cube2"></div>

</div>

<div class="dengl-spinner1" style="bottom:3rem;">

<div class="dengl-cube1"></div>

<div class="dengl-cube2"></div>

</div>

下面是正文

<style>

#wrapper {

position: absolute;

width: 100%;

z-index: 1;

top: 16.1rem;

bottom: 2rem;

left: 0;

overflow: hidden;

}

#all {

position: absolute;

z-index: 1;

-webkit-tap-highlight-color: rgba(0,0,0,0);

width: 100%;

-webkit-transform: translateZ(0);

-moz-transform: translateZ(0);

-ms-transform: translateZ(0);

-o-transform: translateZ(0);

transform: translateZ(0);

-webkit-touch-callout: none;

-webkit-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;

-webkit-text-size-adjust: none;

-moz-text-size-adjust: none;

-ms-text-size-adjust: none;

-o-text-size-adjust: none;

text-size-adjust: none;

background: #fff;

min-height: 100.5%;

}

</style>

<div id="wrapper">

<ul id="all"></ul>

</div>

var index = 2, size = 10;

$(function () {

$.qr.ajax('UserCenter/myJdAndMl', { token: $.qr.gettoken() }, function (d) {

var vm1 = new Vue({

el: '#top_1',

data: {

money: d.data_single.money

}

});

var vm2 = new Vue({

el: '#top_2',

data: {

earnings: d.data_single.earnings,

has_catfood: d.data_single.has_catfood,

not_catfood: d.data_single.not_catfood

}

});

});

var myScroll = new IScroll('#wrapper', {

mouseWheel: false,

bounceTime: 1000,

bounceLock: true,

probeType: 3

});

var handle = 0;

myScroll.on('scroll', function () {

if (this.y > 50) {

handle = 1;

} else if (this.y < (this.maxScrollY - 50)) {

handle = 2;

};

});

myScroll.on('scrollEnd', function () {

if (handle == 2) {

add(index, size);

} else if (handle == 1) {

add(1, size);

}

handle = 0;

myScroll.refresh();

});

document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

add(1, size);

});

function add(pindex, psize) {

$.qr.ajax('UserCenter/maoliangRecordList',

{ token: $.qr.gettoken(), pagesize: psize, pageindex: pindex }, function (d) {

var _h = '';

if (pindex != 1 && d.data_list.data_list.length > 0) index++;

if (d.data_list.data_list.length == 0) return false;

$(d.data_list.data_list).each(function (i, j) {

_h += '<li>';

_h += '<div class="info" style="left: 10%">' + j.name + '</div>';

_h += '<div class="info">' + j.num + '</div>';

_h += '<div class="info">' + j.time + '</div>';

_h += '</li>';

});

if (pindex == 1) $('#all').empty();

$('#all').append(_h);

}, false);

}

以上是 iscroll-probe实现下拉刷新和下拉加载效果 的全部内容, 来源链接: utcz.com/z/342560.html

回到顶部