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

1. swiper禁止滑动

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

//禁止swiper滑动
stopTouchMove() {
	return false
},

2. scroll-view触底加载

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

{
	"path": "pages/index/index",
	"style": {
		"enablePullDownRefresh": false,
		"disableScroll": true//pages.json里面加这个
	}
},
<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>

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

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

4. scroll-view回顶部

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

你可能感兴趣的:(uniapp,uni-app,javascript,开发语言)