前端uniapp列表下拉到底部加载下一页列表【下拉加载页面/带源码/实战】

目录

• • 一. 图片
  • • 1.
    • 2.
    • 二.list.vue
    • 三.uni-load-more.vue
    • 最后

      一. 图片

      1.

      2.

      二.list.vue

      提现{{item.create_time}}{{ item.apply_status.text }} {{ item.money }}元亲，暂无相关记录哦import uniLoadMore from "@/components/uni-load-more.vue";export default {components: {uniLoadMore},data() {return {/*手机高度*/phoneHeight: 0,/*可滚动视图区域高度*/scrollviewHigh: 0,/*状态选中*/state_active: -1,/*数据列表*/tableData: [],no_more: false,loading: true,/*最后一页码数*/last_page: 0,/*当前页面*/page: 1,/*每页条数*/list_rows: 20,tableList: [],}},computed: {/*加载中状态*/loadingType() {if (this.loading) {return 1;} else {if (this.tableData.length != 0 && this.no_more) {return 2;} else {return 0;}}}},mounted() {/*初始化*/this.init();/*获取数据*/this.getData();},methods: {/*初始化*/init() {let self = this;uni.getSystemInfo({success(res) {self.phoneHeight = res.windowHeight;self.scrollviewHigh = res.windowHeight;}});},/*获取数据*/getData() {let self = this;let page = self.page;self.loading = true;let list_rows = self.list_rows;self._get('user.cash/lists', {status: -1,page: page || 1,list_rows: list_rows,}, function(data) {self.loading = false;self.tableData = self.tableData.concat(data.data.list.data);self.last_page = data.data.list.last_page;if (data.data.list.last_page self.no_more = true;return false;}});},/*切换*/stateFunc(e) {let self = this;if (e != self.state_active) {self.tableData = [];self.page = 1;self.state_active = e;self.getData();}},/*可滚动视图区域到顶触发*/scrolltoupperFunc() {console.log('滚动视图区域到顶');},/*可滚动视图区域到底触发*/scrolltolowerFunc() {let self = this;if (self.page view view {width: 6px;height: 2px;border-top-left-radius: 1px;border-bottom-left-radius: 1px;background: #777;position: absolute;opacity: 0.2;transform-origin: 50%;-webkit-animation: load 1.56s ease infinite;}.loading-img>view view:nth-child(1) {transform: rotate(90deg);top: 2px;left: 9px;}.loading-img>view view:nth-child(2) {-webkit-transform: rotate(180deg);top: 11px;right: 0px;}.loading-img>view view:nth-child(3) {transform: rotate(270deg);bottom: 2px;left: 9px;}.loading-img>view view:nth-child(4) {top: 11px;left: 0px;}.load1 view:nth-child(1) {animation-delay: 0s;}.load2 view:nth-child(1) {animation-delay: 0.13s;}.load3 view:nth-child(1) {animation-delay: 0.26s;}.load1 view:nth-child(2) {animation-delay: 0.39s;}.load2 view:nth-child(2) {animation-delay: 0.52s;}.load3 view:nth-child(2) {animation-delay: 0.65s;}.load1 view:nth-child(3) {animation-delay: 0.78s;}.load2 view:nth-child(3) {animation-delay: 0.91s;}.load3 view:nth-child(3) {animation-delay: 1.04s;}.load1 view:nth-child(4) {animation-delay: 1.17s;}.load2 view:nth-child(4) {animation-delay: 1.30s;}.load3 view:nth-child(4) {animation-delay: 1.43s;}@-webkit-keyframes load {0% {opacity: 1;}100% {opacity: 0.2;}}

      最后

      感觉文章好的话记得点个心心和关注和收藏，有错的地方麻烦指正一下，如果需要转载,请标明出处，多谢！！！