uniapp中scroll-view的scrolltolower事件不触发

uniapp中scroll-view的scrolltolower事件不触发

有两种情况

第一种情况
scroll-view中的订单列表详情没有用一个view包起来

<view class="navbar">
	<view v-for="(item, index) in navList" :key="index" class="nav-item" :class="{current: tabCurrent == item.type}"
@click="tabClick(item.type)">
	{{item.text}}
	</view>
</view>
<view class="orderCon">
	<scroll-view class="list-scroll-content" :style="'height:' + scrollHeight + 'px'" scroll-y @scrolltolower="bindDownLoad">
		<!-- 订单列表 -->
		<view v-for="(item, index) in orderList" :key="index" class="order-item">
		...
		</view>
		<view v-if="no_more" class="no-more">亲, 没有更多了
		</view>
		<!-- 无数据提供的页面 -->
		<view v-if="!orderList.length">
			<view class="yoshop-notcont">
				<text class="cont">亲，暂无订单哦</text>
			</view>
		</view>
	</scroll-view>
</view>

这里面order-item每个订单详情之间用margin-top隔一定距离
如果order-item里面不写margin-top
1、如果页面的订单列表的height（所有order-item的height）没有超过页面的height（scroll-view的height），将无法去触发scrolltolower事件
2、如果订单列表的height（所有order-item的height）超过页面的height（scroll-view的height），可以触发scrolltolower事件

.orderCon {
// 不要用margin-top也不要写height: 100%
	padding-top: 80upx;
}
.order-item {
	display: flex;
	flex-direction: column;
	background: #fff;
	margin-top: 16upx;
}

第二种情况
scroll-view中的订单列表详情用一个view(class=“orderList”)包起来

<view class="navbar">
	<view v-for="(item, index) in navList" :key="index" class="nav-item" :class="{current: tabCurrent == item.type}" @click="tabClick(item.type)">
		{{item.text}}
	</view>
</view>
<view class="orderCon">
	<scroll-view class="list-scroll-content" :style="'height:' + scrollHeight + 'px'" scroll-y @scrolltolower="bindDownLoad">
		<!-- 订单列表 -->
		<view class="orderList">
			<view v-for="(item,index) in orderList" :key="index" class="order-item" @click="goOrderDetail(item.orderId)">
			...
			</view>
		</view>
		<view v-if="no_more" class="no-more">亲, 没有更多了
		</view>
		<!-- 无数据提供的页面 -->
		<view v-if="!orderList.length">
			<view class="yoshop-notcont">
				<text class="cont">亲，暂无订单哦</text>
			</view>
		</view>
	</scroll-view>
</view>

解决方法有两种
1、这里面order-item每个订单详情之间用margin-top隔一定距离（不写或写padding-top订单列表的height（所有order-item的height）没有超过页面的height（scroll-view的height）不会触发scrolltolower事件）
2、如果order-item没有用margin-top，可以在订单列表最大的view（class=“orderList”）写margin-top（也可以写padding-top（也可以都不写），区别在于写padding-top（都不写），订单列表的height（所有order-item的height）没有超过页面的height（scroll-view的height）不会触发scrolltolower事件，写margin-top会触发scrolltolower事件）

.orderCon {
// 不要用margin-top也不要写height: 100%
	padding-top: 80upx;
}
.order-item {
	display: flex;
	flex-direction: column;
	background: #fff;
	margin-top: 16upx;
}