首先寫個子組件用來放刷新的內容，命名為pull（可以看例子最后面放的。）

然后再要刷新的頁面引用

<template>   <div class="fbjbox container">   <div class="fbjbox1">  <tab ref='tab' :list="['推薦','熱門','最新']" width="33%" @change='tabchange' style="float:left"/> <span class="price" width="33%" @tap="change" >價格<span class="mui-icon mui-icon-arrowright"></span></span> //點擊價格會排序   </div>  <div class="fbjbox2">      <pull up="true" down="true" @up="next" @down="shuaxin" ref="pull">       <div class="mui-row mui-col-xs-12 mui-clearfix">      <span class="mui-col-xs-6" v-href="{name:'商品詳情'}" rel="external nofollow" v-for="item in list">       <div class="img"><img v-bind:src="item.goods_image"/></div>       <h4>{{item.goods_name}}</h4>       <p class="red1">￥{{item.goods_price}}</p>      </span>     </div>      </pull>    </div></div></template><style> /*選項卡的顏色*/ .tab{background:#fff;} .tab a.active{color:#D83737; border-bottom: 2px solid #D83737;}  .red1{color:red;font-size:15px;padding-left:10px} h4{font-size:16px;font-weight:normal;color:#656565;padding-left:10px}</style><style scoped> .container{font-family: "微軟雅黑";} .mui-row{ overflow: hidden;margin-bottom: 20px;} .mui-row .mui-col-xs-6{width:49%;background-color:#fff;overflow: hidden;margin-top:6px;text-align: left;} .mui-row .mui-col-xs-6:nth-child(even){margin-left:2%;} .mui-row img{width:100%;} .mui-row .img{height:170px;}</style><script>import tab from '../tab'import pull from '../public/pull' export default {   created() {   this.height = window.innerWidth * 40 / 64;   this.is_zc = this.$route.query.is_zc == 1;   this.uid = localStorage.getItem('uid');       },  mounted(){    this.shuaxin(() => { });    },  data() {    return {    tab:0,    list:[],   order:1 //order是排序。1的默認的，2從低到高，3從高到低   }  },  components: {tab,pull},  computed:{  //cmd也是一個變量 ，而且根據選項卡的不同而不同    cmd:function(){    switch(this.tab){     case 0: return "Mp/goodsTuijian";     case 1: return "Mp/hotGoods";     case 2: return "Mp/newGoods";    }       }  },  methods: {   tabchange({index, data}) {    this.tab = index;    },  shuaxin(done) { //首先進去以后的初始    this.$api(this.cmd, { page: 0,order:this.sort }).then(list => { //除了把頁面傳過去還需要把排序的方式傳過去      this.list=list;     done(); //跳到一個新的選項卡時，頁面從新從第一個.不是拉到的那個位置   if(this.$refs.pull){      this.$refs.pull.reset();      this.$refs.pull.nodata = false;      }    });   },  next(done) {    var page = this.list.length;    this.$api(this.cmd, { page,order:this.sort }).then(list => {     if (list.length == 0) { return done&&done(true);}  //這個里面如果只出現done(true)的話可能就是只顯示沒有數據了，不會出現正在加載中     this.list = this.list.concat(list);     done();    });   },  change(){ //點擊價格時變化的class    if(this.sort==1){this.sort=2;}    else    if(this.sort==2){this.sort=3;}    else    if(this.sort==3){this.sort=1;}    this.shuaxin(() => { });   }     },  watch:{   //監聽。當選項卡改變的時候，刷新頁面。   tab:function(){    this.shuaxin(() => { });       },     } }</script>