iscroll

iscroll

需要注意的是外部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);

}

}

上下两个

下面是正文

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 myShttp://croll = new IScroll('#wrapper', {

mouseWheel: false,

bkTKMbCZwounceTime: 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 += '

_h += '

_h += '

_h += '

_h += '

});

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

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

}, false);

}

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。