簡單粗暴上代碼
1:template文件
<template>
<view class="energy">
<view class="content">
<div class="contentab">
<div>
<view v-for="(item,index) in list" :key="item.id" class="box">
<view class="flexbox">
<view class="picleft">
<img :src="item.thumb_url" class="pic" />
</view>
<view class="txtright">
<view class="mglow">
<text class="number">{{item.price}}
</text>
</view>
<view @click="showToggle(index)" class="title mglow">
查看
<span class="iconAdd" v-if="currentIdx != index">∧</span>
<span class="iconReduce" v-if="currentIdx == index">∨</span>
</view>
</view>
<view class="txtright">
<view class="title mglow">
{{item.tree_name}}
</view>
<view>
<text style="margin-right:2%;" class="duibtn">兌換</text>
</view>
</view>
</view>
<view class="info flexbox" v-if="currentIdx == index">
<view><text class="ys1">能量樹：</text>{{item.profit}}</view>
<view><text class="ys1">週期：</text>{{item.cycle}}</view>
<view><text class="ys1">總產：</text>{{item.total_output}}</view>
</view>
</view>
</div>
</div>
<view class="loading">{{loadingText}}</view>
</view>
</view>
</template>
2:js中
<script>
export default {
data() {
return {
list: [],
currentIdx: -1,
page: 0,
loadingText: "正在加載中",
}
},
onShow() {
const that = this;
setTimeout(function() {
that.loadData();
}, 1000);
// uni.startPullDownRefresh();
},
onReachBottom() {
const that = this;
that.loadData();
},
onPullDownRefresh() {
//監聽下拉刷新動作的執行方法，每次手動下拉刷新都會執行一次
const that = this;
that.page = 0;
that.list = [];
that.loadingText = "~~~~~~加載中~~~~~~";
setTimeout(function() {
that.loadData();
uni.stopPullDownRefresh(); //停止下拉刷新動畫
}, 1000);
},
methods: {
// 點擊查看，顯示樹的信息
showToggle(index) {
if (this.currentIdx == index) {
return this.currentIdx = -1;
} else {
return this.currentIdx = index;
}
},
loadData() {
uni.showLoading({
title: '加載中',
mask: true
});
const that = this;
let list = [];
that.page++;
this.$http.treendex({
uuid: , // 接口需要的uuid
page: that.page,// 頁碼
limit: 6 //每頁的條數
}).then((res) => {
// 以下部分滯留一種方式就可以，具體情況具體分析，因爲我的返回的事空對象，我用的第一種
// 如果返回來的是空對象 ，顯示這個，如果不是 進行數據的加載 第一種
if (JSON.stringify(res.data.list) === '{}') {
that.loadingText = "————我是有底線的————";
return false;
}
// 如果返回來的是空數組 ，顯示這個，如果不是 進行數據的加載 第二種
if (res.data.list.length == 0 ) {
that.loadingText = "————我是有底線的————";
return false;
}
for (let i = 0; i < res.data.list.length; i++) {
list.push(res.data.list[i]);
};
that.list = that.list.concat(list);
that.loadingText = "~~~~~~加載中~~~~~~";
}).catch((err) => {
console.log('request fail', err);
})
setTimeout(function() {
uni.hideLoading();
}, 500);
},
},
}
</script>
2:css中
<style scoped>
/**********列表內容***********/
.energy .content {
padding-bottom: 150rpx;
}
/****列表內容****/
.energy .content .box {
padding: 20rpx 30rpx;
margin: 0px 30rpx;
margin-bottom: 30px;
margin-top: 30px;
border-radius: 10rpx;
border: 1rpx solid red;
}
.energy .content .box .flexbox {
border-radius: 10rpx;
justify-content: space-between;
}
.energy .content .box .ys1 {
color: #999;
}
.energy .content .box .ys2 {
color: #333;
}
.energy .content .box .mglow {
margin-top: -12rpx;
}
.energy .content .box .info {
margin-top: 20rpx;
color: #333;
font-size: 36rpx;
}
/*圖片部分*/
.energy .content .box .picleft {
width: 260rpx;
height: 160rpx;
}
.energy .content .box .picleft .pic {
width: 100%;
height: 100%;
}
/*文字信息部分*/
.energy .content .box .txtright {
color: #fff;
width: 50%;
text-align: center;
}
.energy .content .box .txtright .title {
color: #048334;
font-size: 32rpx;
margin-bottom: 7px;
}
.energy .content .box .txtright .number {
color: #999;
font-size: 36rpx;
}
/*兌換按鈕**/
.energy .content .box .txtright .duibtn {
margin-top: 10rpx;
background: #fff;
color: #048334;
border-radius: 10rpx;
padding: 10rpx 20rpx;
}
/***加載更多****/
.energy .content .loading {
color: #333;
text-align: center;
}
</style>
後臺返回的數據
返回的是空對象
