1、下拉刷新DropDownRefresh.vue
<template><div@touchstart="touchStart($event)"@touchmove="touchMove($event)"@touchend="touchEnd($event)":style="{transform:'translate3d(0,'+top+'px,0)'}"><header><slotname="pull-refresh"><divv-if="dropDownState==1"><imgv-if="dropDownStateText.downImg":src="require('../../assets/images/refreshAndReload/'+dropDownStateText.downImg)"><span>{{dropDownStateText.downTxt}}</span></div><divv-if="dropDownState==2"><imgv-if="dropDownStateText.upImg":src="require('../../assets/images/refreshAndReload/'+dropDownStateText.upImg)"><span>{{dropDownStateText.upTxt}}</span></div><divv-if="dropDownState==3"><imgv-if="dropDownStateText.refreshImg":src="require('../../assets/images/refreshAndReload/'+dropDownStateText.refreshImg)"><span>{{dropDownStateText.refreshTxt}}</span></div></slot></header><slot></slot></div></template><script>exportdefault{props:{onRefresh:{type:Function,required:false}},data(){return{defaultOffset:100,//默认高度,相应的修改.releshMoudle的margin-top和.down-tip,.up-tip,.refresh-tip的heighttop:0,scrollIsToTop:0,startY:0,isDropDown:false,//是否下拉isRefreshing:false,//是否正在刷新dropDownState:1,//显示1:下拉刷新,2:松开刷新,3:刷新中……dropDownStateText:{downTxt:'下拉刷新',downImg:'',upTxt:'松开刷新',upImg:'release.png',refreshTxt:'刷新中...',refreshImg:'refresh.gif'}}},created(){if(document.querySelector('.down-tip')){//获取不同手机的物理像素（dpr）,以便适配remthis.defaultOffset=document.querySelector('.down-tip').clientHeight||this.defaultOffset}},methods:{touchStart(e){this.startY=e.targetTouches[0].pageY},touchMove(e){this.scrollIsToTop=document.documentElement.scrollTop||window.pageYOffset||document.body.scrollTop//safari获取scrollTop用window.pageYOffsetif(e.targetTouches[0].pageY>this.startY){//下拉this.isDropDown=trueif(this.scrollIsToTop===0&&!this.isRefreshing){//拉动的距离letdiff=e.targetTouches[0].pageY-this.startY-this.scrollIsToTopthis.top=Math.pow(diff,0.8)+(this.dropDownState===3?this.defaultOffset:0)if(this.top>=this.defaultOffset){this.dropDownState=2e.preventDefault()}else{this.dropDownState=1e.preventDefault()}}}else{this.isDropDown=falsethis.dropDownState=1}},touchEnd(e){if(this.isDropDown&&!this.isRefreshing){if(this.top>=this.defaultOffset){//dorefreshthis.refresh()this.isRefreshing=trueconsole.log(`dorefresh`)}else{//cancelrefreshthis.isRefreshing=falsethis.isDropDown=falsethis.dropDownState=1this.top=0}}},refresh(){this.dropDownState=3this.top=this.defaultOffsetsetTimeout(()=>{this.onRefresh(this.refreshDone)},1200)},refreshDone(){this.isRefreshing=falsethis.isDropDown=falsethis.dropDownState=1this.top=0}}}</script><!--Add"scoped"attributetolimitCSStothiscomponentonly--><stylescoped>.refreshMoudle{width:100%;margin-top:-100px;-webkit-overflow-scrolling:touch;/*ios5+*/}.pull-refresh{width:100%;color:#999;transition-duration:200ms;}.refreshMoudle.down-tip,.up-tip,.refresh-tip{display:flex;align-items:center;justify-content:center;height:100px;}.refreshMoudle.down-tip-img,.up-tip-img,.refresh-tip-img{width:35px;height:35px;margin-right:5px;}</style>
2、上拉加载PullUpReload.vue
<template><div@touchstart="touchStart($event)"@touchmove="touchMove($event)":style="{transform:'translate3d(0,'+top+'px,0)'}"><slot></slot><footer><slotname="load-more"><divv-if="pullUpState==1"><span>{{pullUpStateText.moreDataTxt}}</span></div><divv-if="pullUpState==2"><span></span><span>{{pullUpStateText.loadingMoreDataTxt}}</span></div><divv-if="pullUpState==3"><span></span><span>{{pullUpStateText.noMoreDataTxt}}</span><span></span></div></slot></footer></div></template><script>exportdefault{props:{parentPullUpState:{default:0},onInfiniteLoad:{type:Function,require:false}},data(){return{top:0,startY:0,pullUpState:0,//1:上拉加载更多,2:加载中……,3:我是有底线的isLoading:false,//是否正在加载pullUpStateText:{moreDataTxt:'上拉加载更多',loadingMoreDataTxt:'加载中...',noMoreDataTxt:'我是有底线的'}}},methods:{touchStart(e){this.startY=e.targetTouches[0].pageY},touchMove(e){if(e.targetTouches[0].pageY<this.startY){//上拉this.judgeScrollBarToTheEnd()}},//判断滚动条是否到底judgeScrollBarToTheEnd(){letinnerHeight=document.querySelector('.loadMoudle').clientHeight//变量scrollTop是滚动条滚动时，距离顶部的距离letscrollTop=document.documentElement.scrollTop||window.pageYOffset||document.body.scrollTop//变量scrollHeight是滚动条的总高度letscrollHeight=document.documentElement.clientHeight||document.body.scrollHeight//滚动条到底部的条件if(scrollTop+scrollHeight>=innerHeight){if(this.pullUpState!==3&&!this.isLoading){this.pullUpState=1this.infiniteLoad()//setTimeout(()=>{//this.infiniteLoad()//},200)}}},infiniteLoad(){this.pullUpState=2this.isLoading=truesetTimeout(()=>{this.onInfiniteLoad(this.infiniteLoadDone)},800)},infiniteLoadDone(){this.pullUpState=0this.isLoading=false}},watch:{parentPullUpState(curVal,oldVal){this.pullUpState=curVal}}}</script><!--Add"scoped"attributetolimitCSStothiscomponentonly--><stylescoped>.load-more{width:100%;color:#c0c0c0;background:#f7f7f7;}.moreData-tip,.loadingMoreData-tip,.noMoreData-tip{display:flex;align-items:center;justify-content:center;height:150px;}.loadMoudle.icon-loading{display:inline-flex;width:35px;height:35px;background:url(../../assets/images/refreshAndReload/loading.png)no-repeat;background-size:cover;margin-right:5px;animation:rotating2slinearinfinite;}@keyframesrotating{0%{transform:rotate(0deg);}100%{transform:rotate(1turn);}}.connectingLine{display:inline-flex;width:150px;height:2px;background:#ddd;margin-left:20px;margin-right:20px;}</style>
3、对两个组件的使用
<template><pclass="container"><v-refresh:on-refresh="onRefresh"><v-reload:on-infinite-load="onInfiniteLoad":parent-pull-up-state="infiniteLoadData.pullUpState"><divclass="bank_lists"><divclass="bank_box"><divclass="bank_list"v-for="iteminbank_list":key="item.id"><divclass="bank_icon":style="{'background':'url('+require('../assets/images/56_56/'+item.iconName)+')no-repeat','background-size':'100%'}"></div><spanclass="bank_name">{{item.bankName}}</span></div></div></div><divclass="hot_box"><divclass="hot_header"><spanclass="hot_name">热门推荐</span><divclass="more_box"><spanclass="more_text">查看更多</span><spanclass="more_icon"></span></div></div><divclass="hot_centenrt"><divclass="hot_centent_left"><spanclass="hot_left_name">{{hot_centent_left.name}}</span><spanclass="hot_left_desc">{{hot_centent_left.desc}}</span><divclass="hot_left_img":style="{'background':'url('+require('../assets/images/bank/'+hot_centent_left.imgName)+')no-repeat','background-size':'100%'}"></div></div><divclass="hot_centent_right"><divclass="hot_right_top"><divclass="hot_right_text_box"><spanclass="hot_right_name">{{hot_c_r_one.name}}</span><spanclass="hot_right_desc">{{hot_c_r_one.desc}}</span></div><divclass="hot_right_img":style="{'background':'url('+require('../assets/images/bank/'+hot_c_r_one.imgName)+')no-repeat','background-size':'100%'}"></div></div><divclass="hot_right_bottom"><divclass="hot_right_text_box2"><spanclass="hot_right_name2">{{hot_c_r_two.name}}</span><spanclass="hot_right_desc2">{{hot_c_r_two.desc}}</span></div><divclass="hot_right_img":style="{'background':'url('+require('../assets/images/bank/'+hot_c_r_two.imgName)+')no-repeat','background-size':'100%'}"></div></div></div></div></div><divclass="card_state"><divclass="card_progressborder-right"><divclass="progress_icon"></div><divclass="card_text"><spanclass="card_state_name">{{card_progress.name}}</span><spanclass="card_desc">{{card_progress.desc}}</span></div></div><divclass="card_activation"><divclass="activation_icon"></div><divclass="card_text"><spanclass="card_state_name">{{card_activation.name}}</span><spanclass="card_desc">{{card_activation.desc}}</span></div></div></div><divclass="card_order"><divclass="border_bottomcard_content_bottom"><divclass="hot_header"><spanclass="hot_name">热卡排行</span></div></div><divslot="load-more"><liclass="card_list"v-for="(item,index)ininfiniteLoadData.pullUpList":key="item.id"><divclass="card_content":class="infiniteLoadData.pullUpList.length-1!=index?'card_content_bottom':''"><divclass="card_img":style="{'background':'url('+require('../assets/images/bank/'+item.imgName)+')no-repeat','background-size':'100%'}"></div><divclass="card_list_text"><pclass="card_name">{{item.cardName}}</p><pclass="card_title">{{item.cardTitle}}</p><divclass="card_words_lists"><divclass="card_wordsbor_rad_20"><pclass="card_word">{{item.cardWordOne}}</p></div><divv-if="item.cardWordTwo"class="card_wordscard_words_twobor_rad_20"><pclass="card_word">{{item.cardWordTwo}}</p></div></div></div></div></li></div></div></v-reload></v-refresh></p></template><script>importDropDownRefreshfrom'./common/DropDownRefresh'importPullUpReloadfrom'./common/PullUpReload'exportdefault{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(leti=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.lengthif(this.infiniteLoadData.pullUpList.length+this.infiniteLoadData.everyLoadingNum>this.card_list.length){for(leti=0;i<this.card_list.length-this.showPullUpListLength;i++){this.infiniteLoadData.pullUpList.push(this.card_list[i+this.showPullUpListLength])}}else{for(leti=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()//calldone},//上拉加载onInfiniteLoad(done){if(this.infiniteLoadData.pullUpState===0){this.getPullUpMoreData()}done()}},components:{'v-refresh':DropDownRefresh,'v-reload':PullUpReload}}</script><!--Add"scoped"attributetolimitCSStothiscomponentonly--><stylescoped>@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:2px7px42px7px;}.bank_list{width:100px;height:98px;margin:40px42px042px;}.bank_icon{width:56px;height:56px;margin:022px18px;}.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:030px046px;}.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:020px20px20px;}.hot_centent_left{flex-direction:column;width:350px;height:320px;background:#f7f7f7;}.hot_left_name{display:inline-flex;width:282px;height:24px;margin:50px34px034px;font-size:24px;line-height:24px;color:#333;}.hot_left_desc{display:inline-flex;width:282px;height:20px;margin:12px34px034px;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:49px20px020px;}.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:31px20px020px;}.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:20px020px48px;}.progress_icon{width:48px;height:48px;margin:20px0;background:url("../assets/images/icon/search.png")no-repeat;background-size:100%;}.activation_icon{width:48px;height:48px;margin:20px0;background:url("../assets/images/icon/activation.png")no-repeat;background-size:100%;}.card_text{width:228px;height:66px;margin:11px20px11px30px;}.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:20px020px48px;}.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:54px054px20px;}.card_list_text{flex-direction:column;width:386px;height:124px;margin:52px34px52px74px;}.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:8px18px;line-height:20px;font-size:20px;color:#4b4b4b;}.card_words_two{margin-left:20px;}</style>
来源：/a/1190000016309645
