vue vant-list 组件使用记录_综合

html

<template><div class="integral_list"><van-nav-bar title="积分明细" left-text="返回" left-arrow @click-left="goBack" /><div class="list_content"><van-listv-if="list.length>0":immediate-check="false"v-model="loading":finished="finished"finished-text="没有更多了"@load="getIntegralList"><div class="list_item" v-for="(item,index) in list" :key="index"><div class="item_left"><h3>{
   {item.businessType | formatType}}</h3><span>{
   {item.createTime}}</span></div><div class="item_right"><div class="integral">{
   {item.integral | formatIntergral}}</div></div></div></van-list><van-emptyv-elseclass="custom-image"image="https://img.yzcdn.cn/vant/custom-empty-image.png"description="暂无数据"/></div></div>
</template>

<script>
import { fetchIntegralList } from "@/api/api.js";
export default {data() {return {list: [],loading: false,finished: false,pageNum: 1,pageSize: 10,};},created() {//积分列表this.getIntegralList();},methods: {//请求数据async getIntegralList() {let toast = this.$toast.loading({mask: true,message: "加载中...",});const { pageNum, pageSize } = this;let params = {page: pageNum,pageSize,state: 1,};let res = await fetchIntegralList(params);console.log("返回积分数据", res);this.loading = false;toast.close();if (res.data && res.code == 0) {let list = (res.data && res.data.rows) || [];if (pageNum > 1) {this.list = [...this.list, ...list];} else {this.list = list;}// 如果当前页数 = 总页数，则已经没有数据if (res.data.pageNo == res.data.totalPages) {this.finished = true;this.loading = false;this.finishedText = "- 没有更多了-";}// 如果总页数大于当前页码，页码+1if (res.data.totalPages > this.pageNum) {this.pageNum++;}}},//返回上一页goBack() {this.$router.go(-1);},},filters: {formatType(val) {switch (val) {case 0:return "每日签到";break;case 1:return "问题";break;case 2:return "额外积分";break;case 3:return "商品兑换";break;default:"";}},formatIntergral(val){if(val>0){return `+${val}`}else{return val}}},
};
</script>

css

<style lang="less" scoped>
.integral_list {background: #fff;.list_content {overflow-y: scroll;-webkit-overflow-scrolling: touch;height: 6.2rem;width: 100%;.van-list {padding: 0 0.2rem;.list_item {display: flex;align-items: center;padding: 0.15rem 0;border-bottom: 1px solid #e8e8e8;justify-content: space-between;.item_left {h3 {margin: 0;font-size: 14px;}span {font-size: 12px;}}.item_right {font-size: 20px;color: #00E4C2;}}}}
}
</style>