下拉重新整理

開啟下拉重新整理

在uni-app中有兩種方式開啟下拉重新整理

• 需要在 pages.json 裡，找到的當前頁面的pages節點，並在 style 選項中開啟 enablePullDownRefresh
• 通過呼叫uni.startPullDownRefresh方法來開啟下拉重新整理

通過配置檔案開啟

建立list頁面進行演示

<template>
	<view>
		杭州學科
		<view v-for="(item,index) in arr" :key="index">
			{{item}}
		</view>
	</view>
</template>

<script>
	export default {
		data () {
			return {
				arr: ['前端','java','ui','大資料']
			}
		}
	}
</script>

<style>
</style>
 

通過pages.json檔案中找到當前頁面的pages節點，並在 style 選項中開啟 enablePullDownRefresh

{
  "path":"pages/list/list",
    "style":{
      "enablePullDownRefresh": true
    }
}

通過API開啟

api文件

uni.startPullDownRefresh()

監聽下拉重新整理

通過onPullDownRefresh可以監聽到下拉重新整理的動作

export default {
  data () {
    return {
      arr: ['前端','java','ui','大資料']
    }
  },
  methods: {
    startPull () {
      uni.startPullDownRefresh()
    }
  },
  onPullDownRefresh () {
    console.log('觸發下拉重新整理了')
  }
}
 

關閉下拉重新整理

uni.stopPullDownRefresh()

停止當前頁面下拉重新整理。

案例演示

<template>
	<view>
		<button type="primary" @click="startPull">開啟下拉重新整理</button>
		杭州學科
		<view v-for="(item,index) in arr" :key="index">
			{{item}}
		</view>
	</view>
</template>
<script>
	export default {
		data () {
			return {
				arr: ['前端','java','ui','大資料']
			}
		},
		methods: {
			startPull () {
				uni.startPullDownRefresh()
			}
		},
		
		onPullDownRefresh () {
			this.arr = []
			setTimeout(()=> {
				this.arr = ['前端','java','ui','大資料']
				uni.stopPullDownRefresh()
			}, 1000);
		}
	}
</script>