1. 在頁面配置中啟用下拉刷新
首先，你需要在頁面的?pages.json?文件中啟用下拉刷新功能。
{"pages": [{"path": "pages/index/index","style": {"navigationBarTitleText": "首頁","enablePullDownRefresh": true // 啟用下拉刷新}}]
}2. 在頁面中監聽下拉刷新事件
在頁面的?.vue?文件中，你可以通過?onPullDownRefresh?生命周期函數來監聽下拉刷新事件。
vue
<template><view><view v-for="(item, index) in list" :key="index">{{ item }}</view></view>
</template><script>
export default {data() {return {list: ['Item 1', 'Item 2', 'Item 3']};},onPullDownRefresh() {console.log('下拉刷新觸發');// 模擬數據加載setTimeout(() => {this.list = ['New Item 1', 'New Item 2', 'New Item 3'];uni.stopPullDownRefresh(); // 停止下拉刷新}, 2000);}
};
</script><style>3. 停止下拉刷新
在數據加載完成后，你需要調用?uni.stopPullDownRefresh()?來停止下拉刷新的動畫。
4. 自定義下拉刷新樣式（可選）
如果你想要自定義下拉刷新的樣式，可以使用?uni.setBackgroundTextStyle?和?uni.setBackgroundColor?來設置下拉刷新時的背景顏色和文字樣式。
uni.setBackgroundTextStyle({textStyle: 'dark' // 下拉刷新時的文字樣式，可選值：dark, light
});uni.setBackgroundColor({backgroundColor: '#f8f8f8', // 下拉刷新時的背景顏色backgroundColorTop: '#f8f8f8', // 頂部背景顏色backgroundColorBottom: '#ffffff' // 底部背景顏色
});5. 處理下拉刷新時的網絡請求
通常，下拉刷新時會觸發網絡請求來獲取最新數據。你可以在?onPullDownRefresh?中進行網絡請求，并在請求完成后停止下拉刷新。
onPullDownRefresh() {this.fetchData().then(() => {uni.stopPullDownRefresh();});
},
methods: {fetchData() {return new Promise((resolve) => {setTimeout(() => {this.list = ['New Item 1', 'New Item 2', 'New Item 3'];resolve();}, 2000);});}
})
