【代码】uni-app中触底事件(scrolltolower)不触发的解决方案

2022-06-08 13:44:17  阅读 648 次 评论 0 条
  1. 首先是要给scroll-view给定一个高度,最好不要是100%那种的,很容易无效。

  2. 他的父容器最好也是给指定一个高度

直接上一个例子

模板

<template>
        <view class="main_box">
		<view class="thelist m_list">
			<!-- 予約オ—ダ -->
			<scroll-view class="ykodList" scroll-y="true" @scrolltolower="scrollToBottom">
				<view class="view-od-list">
				    ...
				</view>
			</scroll-view>
		</view>
	</view>
</template>

JS

<script>
    export default {
        methods: {
			scrollToBottom:(e)=>{
				
				console.log(e);
				...
			}
		}
    };
</script>

CSS

.main_box,.thelist{
	height: 100%;
	width: 100%;
}
.dtSwiper{
	width: 100%;
	/* 100vh是屏幕可见区域高度的100%,--window-top是屏幕顶栏的部分,calc()是动态计算函数 */
	height: calc(100vh - var(--window-top));
}



微信扫码查看本文
本文地址:https://www.yangguangdream.com/?id=2207
版权声明:本文为原创文章,版权归 编辑君 所有,欢迎分享本文,转载请保留出处!

发表评论


表情

还没有留言,还不快点抢沙发?