上啦加载组件开发

1.给scroll-view组件绑定 @scrolltolower事件

2.模拟上啦加载过程

<scroll-view scroll-y class="list" @scrolltolower="loadmore(index)">
		<!-- 图文内容区域 -->
		<block v-for="(item, index1) in items.list" :key="index1">
				<index-list :item="item" :index="index"></index-list>
		</block>
		<!-- 上啦加载 -->
		<view class="load-more">{{items.loadtext}}</view>
</scroll-view>

<script>
	// 上啦加载
	loadmore(index) {
		if (this.newsList[index].loadtext !== "上啦加载更多") {return}
			// 修改状态
			this.newsList[index].loadtext = "加载中。。。"
			// 获取数据
			setTimeout(() => {
					// 获取完成
					let obj = {
						userpic: "../../static/demo/userpic/12.jpg",
						username: "星城",
						isguanzhu: true,
						title: "我是标题",
						type: "video", // img 图文, video: 视频
						titlepic: "/static/demo/datapic/11.jpg",
						playnum: "20w",
						long: "2.47",
						infonum: {
							index: 1, // 0: 没有操作, 1: 顶了 2:踩了
							dingnum: 11,
							cainum: 11
						},
						commentnum: 10,
						sharenum: 10
					}
					this.newsList[index].list.push(obj)
					this.newsList[index].loadtext = "上啦加载更多"
				}, 1000)
				// this.newsList[index].loadtext = "没有更多数据了"
			}
</script>

<style lang="less" scoped>
	.load-more {
		text-align: center;
		color: #aaaaaa;
		padding: 15rpx 0;
	}
</style>

在page.json里面关闭页面回弹效果

"style": {
		"app-plus":{
		// 隐藏滚动条
		"scrollIndicator":"none",
		"bounce":"none", // 关闭返弹效果  ⭐⭐
		"titleNView": {...}	
		}
}