uniapp：scroll-view触底加载、下拉刷新、返回顶部_scroll-view 下拉刷新

1. swiper禁止滑动

<swiper-item @touchmove.stop='stopTouchMove'></swiper-item>

//禁止swiper滑动
stopTouchMove() {
	return false
},
1
2
3
4
5
6

2. scroll-view触底加载

uniapp-scrollView
顺便解决了ios下拉，顶部和底部有白屏的问题

{
	"path": "pages/index/index",
	"style": {
		"enablePullDownRefresh": false,
		"disableScroll": true//pages.json里面加这个
	}
},
1
2
3
4
5
6
7

<template>
	<scroll-view scroll-y="true" :enhanced="true" :bounces="false" :show-scrollbar="false" @scrolltolower="touchBottom"
		:lower-threshold='50'>
		<view>内容</view>
	</scroll-view>
</template>

<script>
	export default {
		data(){
			return {
				isloading: false,
			}
		},
		methods:{
		// 触底加载
			touchBottom() {
				if (this.isloading) return
				if (!this.anhuiCheck) {
					if (this.totalPage > this.pageNum) {
						this.pageNum++;
						this.searchGoods(this.queryGoods.parentCatId, this.typeCheck);
					} else {
						uni.$showMsg('暂无其他商品')
					}
				}
			},
		}
	}
</script>

<style lang="scss">
	.body {
		width: 100%;
		height: 100vh;
	}
</style>

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

3. scroll-view下拉刷新的问题

选择uniapp自带的下拉刷新还是scroll-view看场景
选择哪一个，点这个链接
scroll-view下拉刷新

4. scroll-view回顶部

场景：从首页跳转到别的页面再返回来的时候，直接返回首页顶部
点击跳转文章