uni-app列表页的实现，下拉翻页，思路也适用其他手机端，h5和小程序等
pc端的列表页面，通常有个页码，一页页的加载数据。
手机端的页面就不能这么做了，通常是需要用户滚动页面，到最底部时，加载下一页的数据。
页面上元素有：搜索框、for列表、无数据。
定义变量：搜索输入值searchValue、列表数组list、页码page、是否无更多notMore、是否显示无数据showNothing。
需要监听的事件：页面滚动到底部的事件。
实现思路很简单，
请求方法最开始时，显示“加载中”；
然后请求第一页，如果有数据，就把数据加到list中；
当页面滚动到底部时，页码+1（只有“是否无更多”为true时才增加页码）；
如果请求无数据，“是否无更多”置为false，并判断如果是第一页，显示“无数据”，非第一页显示提示“没有更多了”；
请求完成时隐藏“加载中”；
请求出错时隐藏“加载中”，并显示“无数据”。
搜索时，所有变量初始化（页码为1，清空list，隐藏无数据，是否无更多置为true），然后再运行请求列表的方法。
代码如下（请求请自己实现）
1 <template> 2 <view> 3 <!-- 搜索框 --> 4 <uni-search-bar radius="100" placeholder="搜索" cancelButton="none" @confirm="search" /></uni-section> 5 6 <!-- 列表 --> 7 <view v-for="i in list"> 8 <view>{{i.xxx}}</view> 9 <view>{{i.xxx}}</view> 10 <view>...</view> 11 </view> 12 13 <!-- 无数据 --> 14 <view v-if="showNothing" class="p-empty"> 15 <uni-icons custom-prefix="iconfont" type="icon-null" size="100" color="#ccc"></uni-icons> 16 <view class="word">暂无数据</view> 17 </view> 18 19 </view> 20 </template> 21 22 <script> 23 export default { 24 data() { 25 return { 26 //搜索 27 searchValue: '', 28 //列表 29 list: [], 30 //页码 31 page: 1, 32 //是否无更多 33 notMore: true, 34 //无数据 35 showNothing: false 36 } 37 }, 38 39 //监听页面加载 40 onLoad(options) { 41 //获取列表 42 this.refreshListAndPage(); 43 }, 44 45 //页面滚动到底部的事件 46 onReachBottom() { 47 if (this.notMore) { 48 this.page++; 49 this.getList(); 50 } 51 }, 52 53 methods: { 54 //获取列表 55 getList() { 56 //加载中 57 uni.showLoading({ 58 title: '加载中' 59 }); 60 61 /*********请求开始*********/ 62 63 /*********拿到数据*********/ 64 if (res.data.data && res.data.data.result && res.data.data.result.length) { 65 let result = res.data.data.result; 66 //列表连接 67 this.list = this.list.concat(result); 68 } 69 70 /*********未请求到数据*********/ 71 else { 72 //无更多 73 this.notMore = false; 74 //第一页时显示无数据，非第一页显示没有更多 75 if (this.page == 1) { 76 this.showNothing = true; 77 } else { 78 uni.showToast({ 79 title: '没有更多了' 80 }); 81 } 82 } 83 //隐藏加载中 84 uni.hideLoading(); 85 86 87 /*********请求出错时*********/ 88 //隐藏加载中 89 uni.hideLoading(); 90 //无数据 91 this.showNothing = true; 92 }, 93 94 //确认搜索 95 search(res) { 96 //获取搜索词 97 this.searchValue = res.value; 98 //刷新列表和页码 99 this.refreshListAndPage(); 100 }, 101 102 //刷新列表和页码 103 refreshListAndPage() { 104 //初始化 105 this.list = []; 106 this.page = 1; 107 this.notMore = true; 108 this.showNothing = false; 109 //获取列表 110 this.getList(); 111 } 112 113 } 114 } 115 </script> 116 117 <style scoped> 118 /* 自定义图标 */ 119 @import "@/static/iconfont.css"; 120 121 /* 无数据 */ 122 .p-empty{text-align: center;padding-top: 150rpx;} 123 .p-empty .word{margin-top: 30rpx;color: #999;} 124 </style>
