随着手机行业的发展，移动端应用越来越受欢迎，而多端开发也成为了一种常见方式。基于此，uniapp横空出世，成为了一个可以同时开发iOS，Android，H5等平台的开发框架。在uniapp中，如何实现点击加载更多呢？
一、使用uni-list组件
uni-list是uniapp封装的列表组件，实现了列表的渲染和滚动。而在uni-list中，设置了一个附加的属性loadmore，可以实现滑动到底部后自动加载下一页。
首先，在template中定义uni-list组件，并设置loadmore属性为true，代码如下：
<template>
<uni-list :loadmore="true" :loadtext="loadtext" @loadmore="getMoreData">
<uni-list-item v-for="(item, index) in listData" :key="index">
{{item}}
</uni-list-item>
</uni-list>
</template>其中，loadtext是在加载时展示的文本，getMoreData是一个自定义的方法，用于获取下一页数据。
接下来，在script中定义data数据和getMoreData方法，代码如下：
<script>
export default {
data() {
return {
// 列表数据
listData: [],
// 加载时的文本提示
loadtext: '正在加载...',
// 当前页码
currentPage: 1,
// 每页展示数量
pageSize: 10
}
},
methods: {
getMoreData() {
// 发送请求获取下一页数据
uni.request({
url: 'https://example.com/getMoreData',
data: {
page: this.currentPage + 1,
pageSize: this.pageSize
},
success: res => {
// 将数据添加到列表中
this.listData = this.listData.concat(res.data.list)
// 将页码+1
this.currentPage++
// 如果没有更多数据了，显示已经到底部
if (!res.data.hasMoreData) {
this.loadtext = '没有更多了'
}
},
fail: err => {
console.log(err)
}
})
}
}
}
</script>getMoreData方法实现了发送请求获取下一页数据的功能，并在获取到数据后将其添加到列表中。同时，当没有更多数据可加载时，会将loadtext设置为“没有更多了”。
二、自定义按钮触发加载更多
除了使用uni-list的loadmore属性，我们还可以使用自定义按钮来触发加载更多的功能。具体实现方法如下。
首先，在template中添加一个自定义的按钮，用来触发加载更多，代码如下：
<template>
<div>
<uni-list :loadmore="false">
<uni-list-item v-for="(item, index) in listData" :key="index">
{{item}}
</uni-list-item>
</uni-list>
<button @click="getMoreData">点击加载更多</button>
</div>
</template>其中，uni-list的loadmore属性设置为false，表示不自动加载更多，需要通过点击按钮手动触发。
然后，在script中定义data数据和getMoreData方法，代码如下：
<script>
export default {
data() {
return {
// 列表数据
listData: [],
// 当前页码
currentPage: 1,
// 每页展示数量
pageSize: 10,
// 是否有更多数据
hasMoreData: true
}
},
methods: {
getMoreData() {
// 发送请求获取下一页数据
uni.request({
url: 'https://example.com/getMoreData',
data: {
page: this.currentPage + 1,
pageSize: this.pageSize
},
success: res => {
// 将数据添加到列表中
this.listData = this.listData.concat(res.data.list)
// 将页码+1
this.currentPage++
// 如果没有更多数据了，隐藏按钮
if (!res.data.hasMoreData) {
this.hasMoreData = false
}
},
fail: err => {
console.log(err)
}
})
}
}
}
</script>getMoreData方法中，我们同样发送请求获取下一页数据，并在获取到数据后将其添加到列表中。当没有更多数据时，将hasMoreData设置为false，使按钮不再显示。
最后，我们需要在按钮上设置一个v-if判断，判断是否还有更多数据，代码如下：
<button v-if="hasMoreData" @click="getMoreData">点击加载更多</button>
通过这种方式，我们就可以通过点击按钮来手动加载更多数据了。
总结
本文介绍了在uniapp中实现点击加载更多的两种方式：使用uni-list组件和自定义按钮触发。无论哪种方式，都基本上是通过发送请求获取更多数据，并将其添加到列表中的方法。对于开发者来说，选择哪种方式实现都可以根据具体场景进行选择。
以上是uniapp怎么实现点击加载更多功能的详细内容。更多信息请关注PHP中文网其他相关文章！
