2019獨角獸企業重金招聘Python工程師標準>>>

完整代碼，片段來自碼云?wallpaper 項目

<template><view class="all"><view class="title-wire"></view><scroll-view scroll-y='true' style="height:{{height}}px" bindscrolltolower='lower'><view class="all-cont"><view class="all-list"wx:for="{{getAllList}}"wx:key="{{index}}"><view class="all-list-cont"><view class="all-list-text">{{item.text}}</view><image src="{{item.imgUrl}}"/></view></view></view><view class="all-nothave" wx:if="{{isGetAllList}}">沒有更多了</view></scroll-view></view> </template><script> export default {config: {navigationBarTitleText: "商品分類",disableScroll: true,backgroundColor: "#fff"},data: {// 列表height: '',allList: [{text: '1',imgUrl: 'http://ipyd.paixian.com/wall/banner2.png'},{text: '2',imgUrl: 'http://ipyd.paixian.com/wall/banner1.png'},{text: '3',imgUrl: 'http://ipyd.paixian.com/wall/banner3.png'},{text: '4',imgUrl: 'http://ipyd.paixian.com/wall/banner2.png'},{text: '5',imgUrl: 'http://ipyd.paixian.com/wall/banner1.png'},{text: '6',imgUrl: 'http://ipyd.paixian.com/wall/banner3.png'},{text: '7',imgUrl: 'http://ipyd.paixian.com/wall/banner2.png'},{text: '8',imgUrl: 'http://ipyd.paixian.com/wall/banner1.png'},{text: '9',imgUrl: 'http://ipyd.paixian.com/wall/banner3.png'},{text: '10',imgUrl: 'http://ipyd.paixian.com/wall/banner2.png'},{text: '11',imgUrl: 'http://ipyd.paixian.com/wall/banner1.png'},{text: '12',imgUrl: 'http://ipyd.paixian.com/wall/banner3.png'},{text: '13',imgUrl: 'http://ipyd.paixian.com/wall/banner2.png'}],getAllList: [], // 模擬數據滾動加載,pageSize: 10, // 每頁條數pageNo: 1, // 當前頁數isGetAllList: false, // 是否顯示沒有更多了},lower() {// 因為是模擬數據返回的是全部，這里所以要做成分頁的形式，如果是通過頁數去請求接口再push就不需要這樣子操作了if(this.data.getAllList.length < this.data.allList.length){wx.showLoading({ title: '加載中',icon: 'loading',})} else {this.setData({isGetAllList: true})}for (let i = 0; i < this.data.pageSize; i++) {let getAllListLength = this.data.getAllList.lengthif(this.data.getAllList.length < this.data.allList.length){this.data.getAllList.push(this.data.allList[getAllListLength++]);}}setTimeout(() => {this.setData({getAllList: this.data.getAllList});wx.hideLoading();}, 500)},/*** 生命周期函數--監聽頁面加載*/onLoad: function (options) {let _this = thiswx.getSystemInfo({success: (res) => {let result = _this.data.allList;for (let i = 0; i < _this.data.pageSize; i++) {if(_this.data.getAllList.length < _this.data.allList.length){_this.data.getAllList.push(result[i])}}_this.setData({height: res.windowHeight,getAllList: _this.data.getAllList})// 判斷展示沒有更多了if(_this.data.getAllList.length >= _this.data.allList.length) {_this.setData({isGetAllList: true})return false}}})} }; </script><style lang="less"> .title-wire{width: 100%;height: 1px;.mix-1px(0, 0, 1, 0, #ccc);position: fixed;z-index: 999; } .all {background: #fff;// 列表.all-cont{width: 100%;display: flex;flex-wrap: wrap;justify-content: space-between;padding: 20px 0 10px 20px;box-sizing: border-box;}.all-list{width: 50%;.all-list-cont{box-shadow: 0px 2px 4px 0px rgba(215,215,215,0.5);margin-right: 20px;margin-bottom: 20px;height: 120px;position: relative;overflow: hidden;border-radius: 2px;}.all-list-text{position: absolute;background: rgba(20, 20, 20, 0.1);z-index: 99;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;text-align: center;margin: auto;color: #fff;}}.all-nothave{width: 100%;text-align: center;color:#7c7c7c;padding-bottom: 20px;} } </style>

?

轉載于:https://my.oschina.net/lemonfive/blog/1818668

總結

以上是生活随笔為你收集整理的小程序之实现滚动加载的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。