简单粗暴上代码
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>
后台返回的数据
返回的是空对象
