vue移动端下拉刷新和上拉加载的实现代码(2)

<template> <section> <v-refresh :on-refresh="onRefresh"> <v-reload :on-infinite-load="onInfiniteLoad" :parent-pull-up-state="infiniteLoadData.pullUpState"> <div> <div> <div v-for="item in bank_list" :key="item.id"> <div :style="{ 'background': 'url(' + require('../assets/images/56_56/'+item.iconName) + ') no-repeat', 'background-size': '100%' }" ></div> <span>{{item.bankName}}</span> </div> </div> </div> <div> <div> <span>热门推荐</span> <div> <span>查看更多</span> <span></span> </div> </div> <div> <div> <span>{{hot_centent_left.name}}</span> <span>{{hot_centent_left.desc}}</span> <div :style="{ 'background': 'url(' + require('../assets/images/bank/'+hot_centent_left.imgName) + ') no-repeat', 'background-size': '100%' }" ></div> </div> <div> <div> <div> <span>{{hot_c_r_one.name}}</span> <span>{{hot_c_r_one.desc}}</span> </div> <div :style="{ 'background': 'url(' + require('../assets/images/bank/'+hot_c_r_one.imgName) + ') no-repeat', 'background-size': '100%' }" ></div> </div> <div> <div> <span>{{hot_c_r_two.name}}</span> <span>{{hot_c_r_two.desc}}</span> </div> <div :style="{ 'background': 'url(' + require('../assets/images/bank/'+hot_c_r_two.imgName) + ') no-repeat', 'background-size': '100%' }" ></div> </div> </div> </div> </div> <div> <div> <div></div> <div> <span>{{card_progress.name}}</span> <span>{{card_progress.desc}}</span> </div> </div> <div> <div></div> <div> <span>{{card_activation.name}}</span> <span>{{card_activation.desc}}</span> </div> </div> </div> <div> <div> <div> <span>热卡排行</span> </div> </div> <div slot="load-more"> <li v-for="(item,index) in infiniteLoadData.pullUpList" :key="item.id"> <div :class="infiniteLoadData.pullUpList.length - 1 != index? 'card_content_bottom':''"> <div :style="{ 'background': 'url(' + require('../assets/images/bank/'+item.imgName) + ') no-repeat', 'background-size': '100%' }" ></div> <div> <p>{{item.cardName}}</p> <p>{{item.cardTitle}}</p> <div> <div> <p>{{item.cardWordOne}}</p> </div> <div v-if="item.cardWordTwo"> <p>{{item.cardWordTwo}}</p> </div> </div> </div> </div> </li> </div> </div> </v-reload> </v-refresh> </section> </template> <script> import DropDownRefresh from './common/DropDownRefresh' import PullUpReload from './common/PullUpReload' export default { data () { return { bank_list: [ { iconName: 'zhaoshang.png', bankName: '招商银行' }, { iconName: 'minsheng.png', bankName: '民生银行' }, { iconName: 'pingancar.png', bankName: '平安联名' }, { iconName: 'xingye.png', bankName: '兴业银行' }, { iconName: 'shanghai.png', bankName: '上海银行' }, { iconName: 'jiaotong.png', bankName: '交通银行' }, { iconName: 'guangda.png', bankName: '光大银行' }, { iconName: 'more.png', bankName: '全部银行' } ], hot_centent_left: { bankName: '交通银行', name: '交行Y-POWER黑卡', desc: '额度100%取现', imgName: 'jiaohangY-POWER.png' }, hot_c_r_one: { bankName: '招商银行', name: '招行YOUNG卡', desc: '生日月双倍积分', imgName: 'zhaohangYOUNG.png' }, hot_c_r_two: { bankName: '光大银行', name: '光大淘票票公仔联名卡', desc: '电影达人必备', imgName: 'guangdalianming.png' }, card_progress: { name: '办卡进度', desc: '让等待随处可见' }, card_activation: { name: '办卡激活', desc: '让等待随处可见' }, card_list: [ { bankName: '平安联名', imgName: 'pinganqiche.png', cardName: '平安银行信用卡', cardTitle: '平安银行汽车之家联名单币卡', cardWordOne: '首年免年费', cardWordTwo: '加油88折' }, { bankName: '上海银行', imgName: 'shanghaitaobao.png', cardName: '上海银行信用卡', cardTitle: '淘宝金卡', cardWordOne: '积分抵现', cardWordTwo: '首刷有礼' }, { bankName: '华夏银行', imgName: 'huaxiaiqiyi.png', cardName: '华夏银行信用卡', cardTitle: '华夏爱奇艺悦看卡', cardWordOne: '送爱奇艺会员', cardWordTwo: '商城8折' }, { bankName: '浦发银行', imgName: 'pufajianyue.png', cardName: '浦发银行信用卡', cardTitle: '浦发银行简约白金卡', cardWordOne: '团购立减', cardWordTwo: '酒店优惠 免年费' }, { bankName: '中信银行', imgName: 'zhongxinbaijin.png', cardName: '中信银行信用卡', cardTitle: '中信银行i白金信用卡', cardWordOne: '首刷有礼', cardWordTwo: '双倍积分' } ], // 上拉加载的设置 infiniteLoadData: { initialShowNum: 3, // 初始显示多少条 everyLoadingNum: 3, // 每次加载的个数 pullUpState: 0, // 子组件的pullUpState状态 pullUpList: [], // 上拉加载更多数据的数组 showPullUpListLength: this.initialShowNum // 上拉加载后所展示的个数 } } }, mounted () { this.getStartPullUpState() this.getPullUpDefData() }, methods: { // 获取上拉加载的初始数据 getPullUpDefData () { this.infiniteLoadData.pullUpList = [] for (let i = 0; i < this.infiniteLoadData.initialShowNum; i++) { this.infiniteLoadData.pullUpList.push(this.card_list[i]) } }, getStartPullUpState () { if (this.card_list.length === this.infiniteLoadData.initialShowNum) { // 修改子组件的pullUpState状态 this.infiniteLoadData.pullUpState = 3 } else { this.infiniteLoadData.pullUpState = 0 } }, // 上拉一次加载更多的数据 getPullUpMoreData () { this.showPullUpListLength = this.infiniteLoadData.pullUpList.length if (this.infiniteLoadData.pullUpList.length + this.infiniteLoadData.everyLoadingNum > this.card_list.length) { for (let i = 0; i < this.card_list.length - this.showPullUpListLength; i++) { this.infiniteLoadData.pullUpList.push(this.card_list[i + this.showPullUpListLength]) } } else { for (let i = 0; i < this.infiniteLoadData.everyLoadingNum; i++) { this.infiniteLoadData.pullUpList.push(this.card_list[i + this.showPullUpListLength]) } } if (this.card_list.length === this.infiniteLoadData.pullUpList.length) { this.infiniteLoadData.pullUpState = 3 } else { this.infiniteLoadData.pullUpState = 0 } }, // 下拉刷新 onRefresh (done) { // 如果下拉刷新和上拉加载同时使用，下拉时初始化上拉的数据 this.getStartPullUpState() this.getPullUpDefData() done() // call done }, // 上拉加载 onInfiniteLoad (done) { if (this.infiniteLoadData.pullUpState === 0) { this.getPullUpMoreData() } done() } }, components: { 'v-refresh': DropDownRefresh, 'v-reload': PullUpReload } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> @import "../assets/css/not2rem.css"; .container { display: flex; flex-direction: column; width: 750px; height: 1334px; background-color: #f7f7f7; } .bank_lists { width: 100%; height: 320px; margin-top: 0px; background-color: #fff; } .bank_box { display: flex; flex-wrap: wrap; padding: 2px 7px 42px 7px; } .bank_list { width: 100px; height: 98px; margin: 40px 42px 0 42px; } .bank_icon { width: 56px; height: 56px; margin: 0 22px 18px; } .bank_name { display: inline-flex; width: 110px; height: 24px; line-height: 24px; font-size: 24px; color: #333; } .hot_box { width: 100%; height: 420px; margin-top: 10px; background: #fff; } .hot_header { display: flex; justify-content: space-between; align-items: center; width: 674px; height: 80px; margin: 0 30px 0 46px; } .hot_name { display: inline-flex; height: 28px; line-height: 28px; font-size: 28px; color: #333; } .more_text { display: inline-flex; height: 24px; line-height: 24px; font-size: 24px; color: #999; } .more_icon { display: inline-flex; margin-left: 20px; width: 11px; height: 20px; background: url("../assets/images/icon/more.png") no-repeat; background-size: 100%; } .hot_centenrt { display: flex; flex-direction: row; width: 710px; height: 320px; margin: 0 20px 20px 20px; } .hot_centent_left { flex-direction: column; width: 350px; height: 320px; background: #f7f7f7; } .hot_left_name { display: inline-flex; width: 282px; height: 24px; margin: 50px 34px 0 34px; font-size: 24px; line-height: 24px; color: #333; } .hot_left_desc { display: inline-flex; width: 282px; height: 20px; margin: 12px 34px 0 34px; font-size: 20px; line-height: 20px; color: #999; } .hot_left_img { width: 220px; height: 142px; margin-left: 34px; margin-top: 34px; } .hot_centent_right { flex-direction: column; width: 350px; height: 320px; margin-left: 10px; } .hot_right_top { display: flex; flex-direction: row; width: 100%; height: 156px; background: #f7f7f7; } .hot_right_text_box { display: flex; flex-direction: column; width: 180px; height: 58px; margin: 49px 20px 0 20px; } .hot_right_name { display: inline-flex; width: 100%; height: 24px; line-height: 24px; font-size: 24px; color: #333; } .hot_right_desc { display: inline-flex; margin-top: 10px; width: 100%; height: 24px; line-height: 24px; font-size: 24px; color: #999; } .hot_right_img { width: 110px; height: 70px; margin-top: 43px; } .hot_right_bottom { display: flex; flex-wrap: wrap; width: 100%; height: 156px; margin-top: 8px; background: #f7f7f7; } .hot_right_text_box2 { display: flex; flex-direction: column; width: 180px; margin: 31px 20px 0 20px; } .hot_right_name2 { display: inline-flex; width: 100%; height: 58px; line-height: 30px; font-size: 24px; color: #333; } .hot_right_desc2 { display: inline-flex; margin-top: 12px; width: 100%; height: 24px; line-height: 24px; font-size: 24px; color: #999; } .card_state { display: flex; flex-direction: row; width: 100%; height: 128px; margin-top: 10px; background-color: #fff; } .card_progress { display: inline-flex; width: 327px; height: 88px; margin: 20px 0 20px 48px; } .progress_icon { width: 48px; height: 48px; margin: 20px 0; background: url("../assets/images/icon/search.png") no-repeat; background-size: 100%; } .activation_icon { width: 48px; height: 48px; margin: 20px 0; background: url("../assets/images/icon/activation.png") no-repeat; background-size: 100%; } .card_text { width: 228px; height: 66px; margin: 11px 20px 11px 30px; } .card_state_name { display: inline-flex; width: 100%; height: 28px; line-height: 28px; font-size: 28px; color: #333; } .card_desc { display: inline-flex; width: 100%; height: 22px; line-height: 22px; font-size: 22px; margin-top: 16px; color: #999; } .card_activation { display: inline-flex; width: 326px; height: 88px; margin: 20px 0 20px 48px; } .card_order { width: 100%; height: auto; margin-top: 10px; background-color: #fff; } .border_bottom { width: 100%; height: 80px; } .card_list { width: 100%; height: 228px; list-style-type: none; } .card_content { display: flex; flex-direction: row; width: 700px; height: 228px; margin-left: 50px; } .card_img { width: 186px; height: 120px; margin: 54px 0 54px 20px; } .card_list_text { flex-direction: column; width: 386px; height: 124px; margin: 52px 34px 52px 74px; } .card_name { width: 100%; height: 28px; line-height: 28px; font-size: 28px; color: #333; } .card_title { width: 100%; height: 24px; margin-top: 20px; line-height: 24px; font-size: 24px; color: #666; } .card_words_lists { display: flex; flex-direction: row; } .card_words { height: 36px; margin-top: 16px; background-color: #e8ca88; } .card_word { height: 20px; padding: 8px 18px; line-height: 20px; font-size: 20px; color: #4b4b4b; } .card_words_two { margin-left: 20px; } </style>