uniapp列表翻页向上翻滚
后台接口需要传页码数和每页显示条数，直接上代码
1.页面station.vue
<view class="lcbx"> <view class="wdz" v-if="records&&records.length==0"> {{zwsj}} </view> <view class="wdy" v-for="(item, index) in records" :key="index"> <view class="smc"> <image class="xdi" src="../../static/img/sta/green.png" v-if="item.status==1"></image> <image class="xdi" src="../../static/img/sta/red.png" v-if="item.status==2"></image> <image class="xdi" src="../../static/img/sta/hui.png" v-if="item.status==0"></image> {{item.stationName&&item.stationName.length>20?item.stationName.substr(0,6)+'...'+item.stationName.substr(15,item.stationName.length):item.stationName}} <text class="xiz">({{item.power}}kW)</text> </view> <view class="scad"> <!-- @click="togglePopup('center', 'tip')" --> <view class="fff" @click="deleteStation(item)"> <image class="bjaz" src="../../static/img/sta/sca.png"></image> </view> <view class="ddd" @click="edit(item.stationName,item.id)"> <image class="bja" src="../../static/img/sta/bja.png"></image> </view> </view> <view class=""> <view class="hx"></view> <view @click="detail(item.stationName,item.id)" class="whh"> <view class="mrtd" v-if="item.imageList.length==0"> <!-- <image class="mrt" :src="solarUrl+item.image.split(';')[0].substr(item.image.split(';')[0].indexOf('/photo'))" @error="errortt(item,index)" v-if="!imgShow&&!imgShowi"></image> --> <image class="mrt" src="../../static/img/sta/0.png" v-if="imgShow&&item.type==1"></image> <image class="mrt" src="../../static/img/sta/03.png" v-if="imgShowi&&item.type==0"></image> </view> <view class="mrtd" v-if="item.imageList.length>0"> <!-- <image class="mrt" :src="solarUrl+item.image.split(';')[0].substr(item.image.split(';')[0].indexOf('/photo'))" @error="errortt(item,index)" v-if="!imgShow&&!imgShowi"></image> --> <image class="mrt" :src="solarUrl+item.imageList[0]"></image> <!-- <image class="mrt" src="../../static/img/sta/03.png" ></image> --> </view> <view :class="locale?fdlden:fdld"> <!-- 发电功率 --> <view class="fgl"> {{i18n.P_Solar_power}}： </view> </view> <view class="fdzd"> <view class="fgz"> {{item.pvPower}}<text v-if="item.pvPower==0">.0</text> <text class="kwrw">{{item.pvPowerUnit}}</text> </view> </view> <view :class="locale?cndden:cndd"> <view class="fgl"> <!-- 储能功率 --> {{i18n.P_Battery_power}}： </view> </view> <view class="cnbdd"> <view class="fgz"> {{item.packPower}}<text v-if="item.packPower==0">.0</text> <text class="kww">{{item.packPowerUnit}}</text> </view> </view> <view class="bwdd"> <view class="fgl"> <!-- 并网功率 --> {{i18n.P_Grid_power}}： </view> </view> <view class="bwndd"> <view class="fgz"> {{item.bwPower}}<text v-if="item.bwPower==0">.0</text> <text class="kww">{{item.bwPowerUnit}}</text> </view> </view> <view class="hexx"> <view class="hxr"></view> </view> </view> </view> <view class="dwdr" @click="detail(item.stationName,item.id)"> <view class="drdd"> <view class="dsz"> <text class="dzr">{{i18n.H_Today}}</text> </view> </view> <view class="gsf"> <!-- 光伏发电量 --> <view :class="gfdl"> {{i18n.P_Solar_generation}}:<text>\n</text> <text class="gff"> {{item.pvOut}}<text v-if="item.pvOut==0">.0</text> <text class="lwh">{{item.pvOutUnit}}</text> </text> </view> </view> <view :class="locale?fsfen:fsf"> <!-- 储能充电量 --> <view :class="gfdl"> {{i18n.P_Battery_charge}}:<text>\n</text> <text class="gff"> {{item.packIn}}<text v-if="item.packIn==0">.0</text> <text class="lwh">{{item.packInUnit}}</text> </text> </view> </view> <view :class="locale?dsfen:dsf"> <!-- 并网电量 --> <view :class="gfdldd"> {{i18n.P_Grid_sells}}:<text>\n</text> <text class="gff"> {{item.gridIn}}<text v-if="item.gridIn==0">.0</text> <text class="lwh">{{item.gridInUnit}}</text> </text> </view> </view> </view> </view> </view> <view class="uni-loadmore" v-if="showLoadMore">{{loadMoreTexthh}}</view>
2.data(){}里定义变量
data() { return { records: [], recordsRes: [], recordsTemp: [], loadMoreText: "", loadMoreTexthh: "", showLoadMore: false, type: '', } },
3.跟data(){}同级定义下拉刷新onPullDownRefresh()和向上翻滚onReachBottom()方法
onPullDownRefresh() { this.currentStation = 1 this.showLoadMore=false this.loadMoreTexthh = "" this.getStatusCount() this.getStations() //TODO if (this.currentStation * 10 >= this.ttbvvhh) { this.loadMoreTexthh = this.$t('index').PD_No_more_data this.loadMoreText = "" return; } this.showLoadMore = true; // setTimeout(() => { // this.setDateStations(); // }, 300); setTimeout(this.showTabBarRedDot, 1500); setTimeout(() => { uni.stopPullDownRefresh(); //停止下拉刷新动画 }, 300) }, onReachBottom() { // console.log("========onReachBottom=========="); // console.log("====this.currentStation=======", this.currentStation) // console.log("=====ttbvvhh=======", this.ttbvvhh) if (this.currentStation * 10 >= this.ttbvvhh) { // "已经全部加载完毕" this.loadMoreTexthh = this.$t('index').PD_No_more_data this.loadMoreText = "" return; } this.showLoadMore = true; setTimeout(() => { this.setDateStations(); }, 300); },
4.methods中定义setDateStations()和getStations()和search()方法
setDateStations() { uni.showLoading({ title: this.$t('index').P_Loading_data + "..." }) this.currentStation += 1 uni.request({ url: this.provider ? (this.locale ? getApp().globalData.url + '/solar/baseinfo/station/getStations?lang=en-US' : getApp().globalData.url + '/solar/baseinfo/station/getStations?lang=zh-CN') : (this .locale ? getApp().globalData .url + '/app/baseinfo/station/getStations?lang=en-US' : getApp().globalData.url + '/app/baseinfo/station/getStations?lang=zh-CN'), method: 'POST', header: { //'access-token': "aea8cdc9-d0a7-472b-8fe7-bd74f46ce4af" 'Authorization': getApp().globalData.accessToken }, data: { "current": this.currentStation, "size": this.size, "stationName": this.searchValue.value, }, success: (res) => { // console.log(res); // console.log("===res.data=====getStations=====", res.data) if (this.currentStation==1) { this.records = [] } // console.log("=========this.searchValue.value======", this.searchValue.value) this.recordsRes = res.data.records this.recordsTemp = this.recordsRes this.recordsTemp.map((el, index) => { var imageListTemp = el.image.split(';') var imageList = [] imageListTemp.map((ell, indexx) => { if (ell.length > 3) { if (ell.indexOf("\"") != -1) { ell = ell.replace("\"", '') } imageList.push(ell) } }) // console.log("") this.$set(el, 'imageList', imageList) }) this.recordsRes = this.recordsTemp if (res.statusCode == 200) { this.records = this.records.concat(this.recordsRes) } // console.log("====res.statusCode=====", res.statusCode) // console.log("====res=====", res) if (res.statusCode != 200) { uni.showToast({ icon: 'none', title: res.data.msg, }); this.myToken() this.getStatusCount() this.getStations() // this.myTemp=false // this.myTemp=true } // console.log("======this.records===0===", this.records) uni.hideLoading(); setTimeout(() => { uni.stopPullDownRefresh(); //停止下拉刷新动画 }, 300) }, // complete() { // uni.hideLoading(); // } }) },
getStations() { // uni.showLoading({ // title: this.$t('index').P_Loading_data + "..." // }) uni.request({ url: this.provider ? (this.locale ? getApp().globalData.url + '/solar/baseinfo/station/getStations?lang=en-US' : getApp().globalData.url + '/solar/baseinfo/station/getStations?lang=zh-CN') : (this .locale ? getApp().globalData .url + '/app/baseinfo/station/getStations?lang=en-US' : getApp().globalData.url + '/app/baseinfo/station/getStations?lang=zh-CN'), method: 'POST', header: { //'access-token': "aea8cdc9-d0a7-472b-8fe7-bd74f46ce4af" 'Authorization': getApp().globalData.accessToken }, data: { "current": 1, "size": this.size, "stationName": this.searchValue.value, }, success: (res) => { // console.log(res); // console.log("===res.data=====getStations=====", res.data) this.records = [] this.recordsRes = res.data.records this.recordsTemp = this.recordsRes this.recordsTemp.map((el, index) => { var imageListTemp = el.image.split(';') var imageList = [] imageListTemp.map((ell, indexx) => { if (ell.length > 3) { if (ell.indexOf("\"") != -1) { ell = ell.replace("\"", '') } imageList.push(ell) } }) this.$set(el, 'imageList', imageList) }) this.recordsRes = this.recordsTemp if (res.statusCode == 200) { this.records = this.records.concat(this.recordsRes) } this.ttbvvhh = res.data.total // console.log("======this.records===2===", this.records) if (res.statusCode != 200) { } uni.hideLoading(); setTimeout(() => { uni.stopPullDownRefresh(); //停止下拉刷新动画 }, 300) }, // complete() { // uni.hideLoading(); // } }) },
search(res) { // uni.showModal({ // content: '搜索：' + res.value, // showCancel: false // }) this.currentStation = 1 this.showLoadMore=false this.loadMoreTexthh = "" this.records = [] uni.showLoading({ title: this.$t('index').P_Loading_data + "..." }) // console.log("======this.searchValue==1==", this.searchValue.value) uni.request({ url: this.provider ? (this.locale ? getApp().globalData.url + '/solar/baseinfo/station/getStations?lang=en-US' : getApp().globalData.url + '/solar/baseinfo/station/getStations?lang=zh-CN') : (this .locale ? getApp().globalData .url + '/app/baseinfo/station/getStations?lang=en-US' : getApp().globalData.url + '/app/baseinfo/station/getStations?lang=zh-CN'), method: 'POST', header: { //'access-token': "aea8cdc9-d0a7-472b-8fe7-bd74f46ce4af" 'Authorization': getApp().globalData.accessToken }, data: { "current": this.currentStation, "size": this.size, "stationName": this.searchValue.value, }, success: (res) => { //console.log(res); //console.log("===res.data=====getStations=====", res.data) // if (this.currentStation==1) { // this.records = [] // } this.loadMoreTexthh = '' this.recordsRes = res.data.records this.recordsTemp = this.recordsRes this.recordsTemp.map((el, index) => { var imageListTemp = el.image.split(';') var imageList = [] imageListTemp.map((ell, indexx) => { if (ell.length > 3) { if (ell.indexOf("\"") != -1) { ell = ell.replace("\"", '') } imageList.push(ell) } }) this.$set(el, 'imageList', imageList) }) this.recordsRes = this.recordsTemp if (res.statusCode == 200) { this.records = this.records.concat(this.recordsRes) } this.ttbvvhh = res.data.total if (1 * 10 >= this.ttbvvhh) { // "已经全部加载完毕" this.loadMoreTexthh = this.$t('index').PD_No_more_data this.showLoadMore = true; } if(this.ttbvvhh==0){ this.showLoadMore = false } }, complete() { uni.hideLoading(); setTimeout(() => { uni.stopPullDownRefresh(); //停止下拉刷新动画 }, 300) } }) },
