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回顶部

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

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要修改 `scroll-view` 下拉刷新的样式,需要在 `scroll-view` 中添加下拉刷新组件,并设置其相应的样式。 以下是一个示例代码: ```html <scroll-view class="scrollview" scroll-y bindscrolltolower="scrolltolower" bindscrolltoupper="scrolltoupper"> <view class="refresh-view" style="height:{{refreshHeight}}px;"> <image class="refresh-image" src="../../static/img/refresh.png"></image> <view class="refresh-text">{{refreshText}}</view> </view> <!-- 此处为scroll-view的内容 --> </scroll-view> ``` 其中,`refresh-view` 为下拉刷新的容器,`refresh-image` 为下拉刷新的图标,`refresh-text` 为下拉刷新的文字。 接着,在 js 文件中设置下拉刷新的相关逻辑和样式: ```javascript Page({ data: { refreshHeight: 0, refreshText: '下拉刷新', refreshAnimation: {} }, // touchstart事件,记录下拉刷新的初始位置 touchstart: function (e) { this.setData({ startY: e.changedTouches[0].clientY }) }, // touchmove事件,计算下拉刷新的距离并更新样式 touchmove: function (e) { var moveY = e.changedTouches[0].clientY var disY = moveY - this.data.startY if (disY < 0) { return } var scrollHeight = this.data.scrollHeight var refreshHeight = this.data.refreshHeight var progress = disY / (refreshHeight + 10) * 100 if (progress > 100) { progress = 100 } var refreshText = '' if (progress < 20) { refreshText = '下拉刷新' } else if (progress < 80) { refreshText = '释放立即刷新' } else { refreshText = '正在刷新...' } this.setData({ refreshHeight: disY, progress: progress, refreshText: refreshText }) }, // touchend事件,触发下拉刷新并更新样式 touchend: function (e) { var refreshHeight = this.data.refreshHeight var scrollHeight = this.data.scrollHeight var progress = this.data.progress if (progress < 80) { this.setData({ refreshHeight: 0, refreshText: '下拉刷新' }) } else { this.setData({ refreshHeight: 50, refreshText: '正在刷新...' }) // 触发下拉刷新 this.refreshData() } }, // scrolltolower事件,触发上拉加载更多 scrolltolower: function () { // 触发上拉加载更多 this.loadMoreData() }, // scrolltoupper事件,触发下拉刷新 scrolltoupper: function () { this.setData({ refreshHeight: 50, refreshText: '正在刷新...' }) // 触发下拉刷新 this.refreshData() }, // 下拉刷新的逻辑 refreshData: function () { // 下拉刷新的具体实现 }, // 上拉加载更多的逻辑 loadMoreData: function () { // 上拉加载更多的具体实现 } }) ``` 在 css 文件中设置相应的样式: ```css .scrollview { height: 100%; overflow: auto; } .refresh-view { display: flex; justify-content: center; align-items: center; height: 0; transition: height 0.3s; } .refresh-image { width: 20px; height: 20px; margin-right: 10px; } .refresh-text { font-size: 14px; color: #666; } ``` 这样就可以实现自定义 `scroll-view` 下拉刷新的样式了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值