uniapp下拉刷新和触底

阳光穿透心脏的1/2处 2021-07-25 16:53 856阅读 0赞

## 效果图： ##

![20210306115501184.gif][]

## 代码实现： ##

结构目录：

![20210306113541858.png][]

pages.json:

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70][]

{
    	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
    		{
    			"path": "pages/index/index",
    			"style": {
    				"navigationBarTitleText": "下拉刷新",
    				"enablePullDownRefresh":true
    			}
    		}
    	],
    	"globalStyle": {
    		"navigationBarTextStyle": "black", //white/black
    		"navigationBarTitleText": "测试",
    		"navigationBarBackgroundColor": "yellow"
    	}
    }

index.vue:

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1][]

<template>
    	<view>
    		<button @click="pullDown">点击下拉刷新</button>
    		<button @click="reset">重置</button>
    		<view style="height: 250rpx;" v-for="(item, index) in list" :key="index">{
       { item }}</view>
    	</view>
    </template>
    
    <script>
    export default {
    	data() {
    		return {
    			list: ['张三', '李四', '王五', '赵六', 'a', 'b', 'c', 'd']
    		};
    	},
    	onPullDownRefresh() {
    		setTimeout(() => {
    			this.list = ['java', 'C#', 'python', 'javascript', 'C'];
    			uni.stopPullDownRefresh();
    		}, 1000);
    	},
    	onReachBottom() {
    		uni.showToast({
    			title: '已经到底了'
    		});
    	},
    	methods: {
    		pullDown() {
    			uni.startPullDownRefresh();
    		},
    		reset() {
    			this.list = ['张三', '李四', '王五', '赵六'];
    		}
    	}
    };
    </script>

[20210306115501184.gif]: /images/20210725/5fb3206366b34f7eab9659e68347a971.png
[20210306113541858.png]: /images/20210725/3adbcb1580244c289328cc78dc671bd0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70]: /images/20210725/a12a2b81a26b4c53afe930d3f1abc0f8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1]: /images/20210725/8723963bba3f46f4b3712deef47bc6bd.png