隨著手機產業的發展，行動裝置應用越來越受歡迎，而多端開發也成為了一種常見方式。基於此，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中文網其他相關文章！
