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

  <div class="refreshMoudle"> <header class="pull-refresh">  <div class="down-tip"> <span class="down-tip-text">{{dropDownStateText.downTxt}}</span></div><div class="up-tip"> <span class="up-tip-text">{{dropDownStateText.upTxt}}</span></div><div class="refresh-tip"> <span class="refresh-tip-text">{{dropDownStateText.refreshTxt}}</span></div></header></div><!-- Add "scoped" attribute to limit CSS to this component only --> .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; } 

  <div class="loadMoudle"> <footer class="load-more">  <div class="moreData-tip"> <span class="moreData-tip-text">{{pullUpStateText.moreDataTxt}}</span></div><div class="loadingMoreData-tip"> <span class="icon-loading"></span><span class="loadingMoreData-tip-text">{{pullUpStateText.loadingMoreDataTxt}}</span></div><div class="noMoreData-tip"> <span class="connectingLine"></span><span class="noMoreData-tip-text">{{pullUpStateText.noMoreDataTxt}}</span><span class="connectingLine"></span></div></footer></div><!-- Add "scoped" attribute to limit CSS to this component only --> .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-600) no-repeat; background-size: cover; margin-right: 5px; animation: rotating 2s linear infinite; } @keyframes rotating { 0% { transform: rotate(0deg); } 100% { transform: rotate(1turn); } } .connectingLine { display: inline-flex; width: 150px; height: 2px; background: #ddd; margin-left: 20px; margin-right: 20px; } 

  <section class="container">   <div class="bank_lists"> <div class="bank_box"> <div class="bank_list"> <div class="bank_icon"></div><span class="bank_name">{{item.bankName}}</span></div></div></div><div class="hot_box"> <div class="hot_header"> <span class="hot_name">热门推荐</span><div class="more_box"> <span class="more_text">查看更多</span><span class="more_icon"></span></div></div><div class="hot_centenrt"> <div class="hot_centent_left"> <span class="hot_left_name">{{hot_centent_left.name}}</span><span class="hot_left_desc">{{hot_centent_left.desc}}</span><div class="hot_left_img"></div></div><div class="hot_centent_right"> <div class="hot_right_top"> <div class="hot_right_text_box"> <span class="hot_right_name">{{hot_c_r_one.name}}</span><span class="hot_right_desc">{{hot_c_r_one.desc}}</span></div><div class="hot_right_img"></div></div><div class="hot_right_bottom"> <div class="hot_right_text_box2"> <span class="hot_right_name2">{{hot_c_r_two.name}}</span><span class="hot_right_desc2">{{hot_c_r_two.desc}}</span></div><div class="hot_right_img"></div></div></div></div></div><div class="card_state"> <div class="card_progress border-right"> <div class="progress_icon"></div><div class="card_text"> <span class="card_state_name">{{card_progress.name}}</span><span class="card_desc">{{card_progress.desc}}</span></div></div><div class="card_activation"> <div class="activation_icon"></div><div class="card_text"> <span class="card_state_name">{{card_activation.name}}</span><span class="card_desc">{{card_activation.desc}}</span></div></div></div><div class="card_order"> <div class="border_bottom card_content_bottom"> <div class="hot_header"> <span class="hot_name">热卡排行</span></div></div><div> <li class="card_list"> <div class="card_content"> <div class="card_img"></div><div class="card_list_text"> <p class="card_name">{{item.cardName}}</p><p class="card_title">{{item.cardTitle}}</p><div class="card_words_lists"> <div class="card_words bor_rad_20"> <p class="card_word">{{item.cardWordOne}}</p></div><div class="card_words card_words_two bor_rad_20"> <p class="card_word">{{item.cardWordTwo}}</p></div></div></div></div></li></div></div></section><!-- Add "scoped" attribute to limit CSS to this component only --> @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-600") 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-600") no-repeat; background-size: 100%; } .activation_icon { width: 48px; height: 48px; margin: 20px 0; background: url("../assets/images/icon/activation.png-600") 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: 1<i style="color:transparent">本文来源gaodai$ma#com搞$代*码*网(</i>00%; 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; }