// 首先在对应的pages.json文件中,配置刷新效果 { "path" : "pages/list/list", "style" : { "navigationBarTitleText": "房源列表", "enablePullDownRefresh": true } }
// 在methods里面定义请求数据接口 // 请求第1页的数据 getList() { this.listData = [] uni.request({ url: 'http://localhost:8000/api/house/list?page=1&size=7', method: "POST", header: { 'content-type': 'application/x-www-form-urlencoded' }, data: { style: 1, }, success: (ret) => { uni.stopPullDownRefresh(); // 停止当前页面刷新 if (ret.data.code == 200) { ret.data.data.some((item, i) => { this.listData.unshift({ title: item.title, price: item.price, id: item.id, image: "http://localhost:8000" + item.image, time: item.time, }) }) // this.banner = data.data; } }, fail: (data, code) => { console.log('fail' + JSON.stringify(data)); } }) }, // 请求第N页的数据 /* 分页请求 */ getPageList() { uni.request({ url: 'http://localhost:8000/api/house/list?page=' + this.page + '&size=7', method: "POST", header: { 'content-type': 'application/x-www-form-urlencoded' }, data: { style: 1, }, success: (ret) => { console.log(ret) uni.stopPullDownRefresh(); // 停止当前页面刷新 if (ret.data.code == 200) { this.page = this.page + 1 // 页面+1 ret.data.data.some((item, i) => { this.listData.push({ title: item.title, price: item.price, id: item.id, image: "http://localhost:8000" + item.image, time: item.time, }) }) } else { /* 如果接口报错 就是没数据 加载消失 */
// <!-- 下拉加载 --> 加载HTML
// <view style="text-align: center; 100%;">
// <u-loading mode="circle" :show="show" size="36">加载中...</u-loading>
// </view>
this.show = false } }, fail: (data, code) => { } }) },
// 下面是下拉上啦的配置函数 onLoad() { /* 列表 */ this.getList(); }, onPullDownRefresh() { /* 下拉的时候更新 */ this.getList(); }, onReachBottom() { // console.log("向下拉") //此处使用定时器可查看出下拉刷新效果 setTimeout(() => { this.getPageList(() => { uni.stopPullDownRefresh() }) }, 1000) },
// 完整代码 <template> <view> <!-- 输入框 搜索 --> <view> <topSearch></topSearch> </view> <!-- 下拉菜单 --> <u-dropdown> <u-dropdown-item v-model="housePrice" title="价格高低" :options="optionsPrice" @change="changePrice"></u-dropdown-item> <u-dropdown-item v-model="houseTime" title="发布时间" :options="optionsTime" @change="changeTime"></u-dropdown-item> </u-dropdown> <!-- 商品列表 --> <view class="uni-list"> <view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(value,key) in listData" :key="key" @click="detail(value.id)" :pk="value.id"> <view class="uni-media-list"> <image class="uni-media-list-logo" :src="value.image"></image> <view class="uni-media-list-body"> <view class="uni-media-list-text-top">{{value.title}}</view> <text>123</text> <view class="uni-media-list-text-bottom"> <text>{{value.price}}</text> <text>{{value.time}}</text> </view> </view> </view> </view> </view> <!-- 下拉加载 --> <view style="text-align: center; 100%;"> <u-loading mode="circle" :show="show" size="36"></u-loading> </view> </view> </template> <script> import topSearch from "@/components/topSearch/topSearch.vue" var dateUtils = require('../../utils/util.js').dateUtils; export default { components: { topSearch }, data() { return { /* 商品列表 */ listData: [], last_id: "", reload: false, page: 1, show: true, /* 下拉菜单 */ sort:1, houseprice: 1, houseTime: null, optionsPrice: [{ label: '默认排序', value: 1, }, { label: '从低到高', value: 2, }, { label: '从高到低', value: 3, } ], optionsTime: [{ label: '最近发布', value: 4, }, { label: '最早发布', value: 5, }, ], } }, methods: { /* 跳转详情 */ detail(goods_id) { /* 记录商品主键 */ // uni.setStorageSync('goods_id',) console.log(goods_id) // uni.navigateTo({ // url: '/pages/detail/detail' // }) }, /* 下拉菜单 */ changePrice() { this.sort = this.housePrice this.getList() }, changeTime() { this.sort = this.houseTime this.getList() }, /* 刚进入请求接口 */ getList() { /* 初始化参数 */ this.page = 1 this.listData = [] uni.request({ url: 'http://localhost:8000/api/house/list?page=1&size=7', method: "POST", header: { 'content-type': 'application/x-www-form-urlencoded' }, data: { style: uni.getStorageSync('style'), sort:this.sort }, success: (ret) => { uni.stopPullDownRefresh(); // 停止当前页面刷新 if (ret.data.code == 200) { this.page = this.page + 1 ret.data.data.some((item, i) => { this.listData.unshift({ title: item.title, price: item.price, id: item.id, image: "http://localhost:8000" + item.image, time: item.time, }) }) this.show = false } }, fail: (data, code) => { console.log('fail' + JSON.stringify(data)); } }) }, /* 分页请求 */ getPageList() { this.show = true uni.request({ url: 'http://localhost:8000/api/house/list?page=' + this.page + '&size=7', method: "POST", header: { 'content-type': 'application/x-www-form-urlencoded' }, data: { style: uni.getStorageSync('style'), sort:this.sort }, success: (ret) => { // console.log(ret) uni.stopPullDownRefresh(); // 停止当前页面刷新 if (ret.data.code == 200) { this.page = this.page + 1 ret.data.data.some((item, i) => { this.listData.push({ title: item.title, price: item.price, id: item.id, image: "http://localhost:8000" + item.image, time: item.time, }) }) } else { /* 如果接口报错 就是没数据 加载消失 */ this.show = false } }, fail: (data, code) => { this.show = false } }) }, }, onLoad() { /* 列表 */ this.getList(); }, onPullDownRefresh() { /* 下拉的时候更新 */ this.getList(); }, onReachBottom() { console.log("向下拉") //此处使用定时器可查看出下拉刷新效果 setTimeout(() => { this.getPageList(() => { uni.stopPullDownRefresh() }) }, 1000) }, } </script> <style> /* 列表 */ .banner { height: 360upx; overflow: hidden; position: relative; background-color: #ccc; } .banner-img { 100%; } .banner-title { max-height: 84upx; overflow: hidden; position: absolute; left: 30upx; bottom: 30upx; 90%; font-size: 32upx; font-weight: 400; line-height: 42upx; color: white; z-index: 11; } .uni-list { background-color: #FFFFFF; position: relative; 100%; display: flex; flex-direction: column; } .uni-list:after { position: absolute; z-index: 10; right: 0; bottom: 0; left: 0; height: 1px; content: ''; -webkit-transform: scaleY(.5); transform: scaleY(.5); background-color: #c8c7cc; } .uni-list::before { position: absolute; z-index: 10; right: 0; top: 0; left: 0; height: 1px; content: ''; -webkit-transform: scaleY(.5); transform: scaleY(.5); background-color: #c8c7cc; } .uni-list-cell { position: relative; display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .uni-list-cell-hover { background-color: #eee; } .uni-list-cell::after { position: absolute; z-index: 3; right: 0; bottom: 0; left: 30upx; height: 1px; content: ''; -webkit-transform: scaleY(.5); transform: scaleY(.5); background-color: #c8c7cc; } .uni-list .uni-list-cell:last-child::after { height: 0upx; } /* 图文列表 */ .uni-media-list { padding: 22upx 30upx; box-sizing: border-box; display: flex; 100%; flex-direction: row; } .uni-navigate-right.uni-media-list { padding-right: 74upx; } .uni-pull-right { flex-direction: row-reverse; } .uni-pull-right>.uni-media-list-logo { margin-right: 0upx; margin-left: 20upx; } .uni-media-list-logo image { height: 100%; 100%; } .uni-media-list-text-bottom { 100%; line-height: 30upx; font-size: 26upx; color: #8f8f94; } .uni-media-list-logo { 180upx; height: 140upx; margin-right: 20upx; } .uni-media-list-body { display: flex; flex: 1; flex-direction: column; justify-content: space-between; align-items: flex-start; overflow: hidden; height: auto; } .uni-media-list-text-top { 100%; line-height: 36upx; font-size: 30upx; height: 74upx; font-size: 28upx; overflow: hidden; } .uni-media-list-text-bottom { display: flex; flex-direction: row; justify-content: space-between; } /* 列表 */ </style>