vue刷新和tab切换实例

首先写个子组件用来放刷新的内容，命名为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>