移动端下拉刷新、上滑加载更多

下拉刷新和上滑加载更多

下拉刷新跟上滑加载更多主要的都是监测下拉跟上滑的动作，然后请求接口。

下拉刷新

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
// 下拉时最外层元素下移函数
translateY(tHeight) {
	$('.l-pull').css({ 'transform': 'translateY(' + tHeight + 'px)' });
	$('.l-pull').css({ '-ms-transform': 'translateY(' + tHeight + 'px)' });
	$('.l-pull').css({ '-moz-transform': 'translateY(' + tHeight + 'px)' });
	$('.l-pull').css({ '-webkit-transform': 'translateY(' + tHeight + 'px)' });
	$('.l-pull').css({ '-o-transform': 'translateY(' + tHeight + 'px)' });
},

dropDownRefresh() {
	// 判断是点击还是滑动
	var falg;
	// 点击元素在页面上的位置
	var _startPos = 0;
	// 下滑的最大位移
	var targetNum = 40;
	// 下滑的实际位移
	var _transitionHeight = 0;
	// 点击时this指向改变
	var that = this;
	$('body').on('touchstart touchmove touchend', '.l-pull', function (e) {
		switch (e.type) {
		case 'touchstart':
			falg = false;
			// 判断是否请求成功
			that.successAjax = false; 
			// 判断是否是下拉刷新
			that.isDropDownRefresh = true;             
			_startPos = e.touches[0].pageY;
			break;
		case 'touchmove':
			falg = true;
			_transitionHeight = e.touches[0].pageY - _startPos;
			// 计算元素应该下滑的距离
			$('body').attr('transitionHeight', _transitionHeight);
			if (_transitionHeight > 0 && _transitionHeight <= targetNum && $(window).scrollTop() <= 0) {
				that.translateY(_transitionHeight);
			} else if (_transitionHeight > targetNum) {
				that.translateY(targetNum);                
			}
			break;
		case 'touchend':
			// 调用刷新接口 
			if (falg) {
				that.loadAjax(1);                  
			}
			break;
		}
	});
},


// 下拉加载动画
animationFun(id) {
	var that = this;
	loadingAanimation = BodyMovin.loadAnimation({
		container: document.getElementById(id),  //Required
		path: '//mat1.gtimg.com/city/youpin/yn/loading_gray.json',
		renderer: 'svg', // Required 这个一般都是svg 
		loop: true, // Optional参数是否循环加载动画 
		autoplay: false, // Optional 是否自动播放动画
		name: "Hello World", // Name for future reference. Optional.
	})
},
// 显示json动画的回掉函数
showLoadingAnimate() {
	var that = this;
	loadingAanimation.play();
},
// 隐藏json动画的回掉函数
hideLoadingAnimate() {
	var that = this;
	loadingAanimation.stop();
},
// vue事件实现
touchStart(e) {
	var that = this;
	that.isTouchIng = true;
	that.showLoadingAnimate();
	that._startPos = e.touches[0].pageY;
	that._transitionHeight = 0;
	that.flag = false;
},
touchMove(e) {
	var that = this;
	that._transitionHeight = e.touches[0].pageY - that._startPos;
	// console.log(that._transitionHeight, 'that._transitionHeight');
	if (that._transitionHeight > 0 && that._transitionHeight <= that.targetNum && $(window).scrollTop() <= 0) {
		$('.l-refresh').height(that._transitionHeight + 'px');
		if (that.shufflingList.length > 1) {
		bannerSwiper.stopAutoplay();
		}
		that.flag = true;
	} else if (that._transitionHeight > that.targetNum && $(window).scrollTop() <= 0) {
		$('.l-refresh').height(that.targetNum + 'px');
	}
},
touchEnd(e) {
	var that = this;
	that.isTouchIng = false;
	if (that.flag) {
		if (Math.abs(that._transitionHeight) > 20 && $(window).scrollTop() <= 0) {
			if (this.active == 0) {
				this.loadAjax(1);
				that.getShuffling(that.category.categoryId);
				that.getCart();
				that.getMuseum();
				that.getTheme();
				that.getPopular();
				that.getCategory();
			} else {
				that.getShuffling(that.category.categoryId);
				this.getUsualActList(this.category.categoryId, 1);
				that.getCategory();
				that.getCart();
			}
		}
	}
	setTimeout(() => {
		$('.l-refresh').animate({ 'height': '0' }, '1000');
	}, 0);
},

上滑加载更多

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
handleScroll() {
	var that = this;
	that.beforeScrollTop = $(window).scrollTop();
	$(window).scroll(function () {
		var scrollTop = $(window).scrollTop(); 
		if (scrollTop < that.beforeScrollTop) {
		that.beforeScrollTop = scrollTop;
		return;
		}
		// 否则进一步判断
		that.beforeScrollTop = scrollTop;
		var winHeight = $(window).height();
		var docHeight = $(document).height();          
		// console.log(scrollTop + winHeight, 'scrollTop + winHeight');
		// console.log(docHeight,'docHeight');
		if (!that.blockRequest) {
		if (scrollTop + winHeight >= docHeight) {
			if (that.active == 0) {
			that.loadAjax();
			} else {
			that.getUsualActList(that.category.categoryId);
			}
		} else {
			if (that.hasMore) {
			that.loading(0);
			} else {
			that.loading(2);
			}
		}
		}
});
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
window.showLoad = function (type){
  if (type == 0) {
    // 加载更多
    $('.loading').find('.loading-text').show();
    $('.loading').find('.loading-img').hide();
    $('.loading').find('.loaded-text').hide();
    $('.loading').find('.loading-error').hide();
  } else if (type == 1) {
    // 加载更多loading
    $('.loading').find('.loading-text').show();
    $('.loading').find('.loading-img').show();
    $('.loading').find('.loaded-text').hide();
    $('.loading').find('.loading-error').hide();
  } else if (type == 2) {
    // 全部加载完毕
    $('.loading').find('.loading-text').hide();
    $('.loading').find('.loading-img').hide();
    $('.loading').find('.loaded-text').show();
    $('.loading').find('.loading-error').hide();
  } else if (type == 3) {
    // 加载失败
    $('.loading').find('.loading-text').hide();
    $('.loading').find('.loading-img').hide();
    $('.loading').find('.loaded-text').hide();
    $('.loading').find('.loading-error').show();
  }
}

loading(type) {
	setTimeout(() => {
		showLoad(type)
	}, 0);
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
loadAjax(index) {
	var that = this;
	if (index || (!that.blockRequest && that.hasMore)) {
		that.blockRequest = true;
		if (index) {
		that.curPage = 1;
		that.hasMore = true;
		}
	} else {
		return false;
	}
	that.loading(1);
	$.ajax({
		url: APIS.getRecommendedAct,
		type: 'GET',
		data: {
		type: that.type,            
		page: that.curPage,
		page_size: 20
		},
		success: function (res) {
		// if(that.isTouchIng){
		//   return false;
		// }
		if (res.ret == 0) {
			that.newGoods.title = res.data.title;
			that.curPage = res.data.page_current;
			that.pageTatol = res.data.page_total;
			if (that.curPage == 1) {
			that.newGoods.act_list = res.data.act_list;
			} else {
			that.newGoods.act_list = that.newGoods.act_list.concat(res.data.act_list);
			}
			that.curPage++;
		} else {
			// JAlert.show(res.msg || '接口返回内容出错');
			that.loading(3);              
		}
		},
		error: function () {
		if(that.isTouchIng){
			return false;
		}
		that.loading(3);                          
		// JAlert.show('请求出错');
		},
		complete: function () {
		// if(that.isTouchIng){
		//   return false;
		// }
		$('.l-refresh').animate({ 'height': '0' }, '1000'); 
		if ($('.l-refresh').height == 0) {
			that.hideLoadingAnimate();
		}
		if (that.curPage > that.pageTatol) {
			that.hasMore = false;
			that.loading(2);
		} else {
			that.loading(0);
		} 
		that.blockRequest = false;
		}
	});
},
赏

谢谢你请我吃糖果

支付宝
微信

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true