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>

下面是命名为pull的子组件。

<template>
 <div class=\"mui-scroll-wrapper\" ref=\"box\" v-bind:style=\"{top:top+\'px\'}\">
  <div class=\"mui-pull-top-pocket mui-block\" v-bind:class=\"{\'mui-visibility\':obj.y>0}\" v-if=\"down\">
   <div class=\"mui-pull\" v-show=\"flag\">
    <div class=\"mui-pull-loading mui-icon\" v-bind:class=\"{\'mui-spinner\': type==2,\'mui-icon-pulldown\':type!=2}\" v-bind:style=\"css1\"></div>
    <div class=\"mui-pull-caption\" v-if=\"type==0\">下拉可以刷新</div>
    <div class=\"mui-pull-caption\" v-if=\"type==1\">释放立即刷新</div>
    <div class=\"mui-pull-caption\" v-if=\"type==2\">正在刷新</div>
   </div>
  </div>
  <div class=\"mui-scroll\" @scrollstart.self=\"scrollstart\" @scroll.self=\"scroll\" @scrollbottom=\"scrollbottom\">
   <slot>
    <div class=\"no-content\">
     <i></i>
     <h4>暂无内容</h4>
    </div>
   </slot>
   <div class=\"mui-pull-bottom-pocket mui-block mui-visibility\" v-if=\"type==4\">
    <div class=\"mui-pull\">
     <div class=\"mui-icon mui-spinner mui-visibility\" style=\"transition: -webkit-transform 0.3s ease-in; transform: rotate(180deg); animation: spinner-spin 1s step-end infinite;position: relative;top: 8px;\"></div>
<div class=\"mui-pull-caption mui-visibility\">正在加载...</div>
</div>
</div>
<!--<div v-if=\"nodata\" class=\"nodata\">已经没有更多数据</div>-->
<div v-if=\"nodata\" class=\"yqxtsdkn\"></div>
</div>
</div>
</template>
<style scoped>
 .mui-scroll-wrapper { position:relative;height:100%;}
 .nodata { color:#efefef;text-align:center;margin-top:10px;line-height: 30px; font-size: 12px; background:#0B2E4C}
</style>
<script>
 export default {
  mounted() {
   var box = this.$refs.box;
   this.obj = mui(box).scroll();
  },
  props: [\"down\", \"up\", \"top\"],
  data() {
   return {
    flag: false,
    Y: 0,
    obj: {},
    type: 0,
    nodata: false
   }
  },
  computed: {
   css1() {
    return {
     transition: this.type > 0 ? \'-webkit-transform 0.3s ease-in\' : \"\",
     transform: this.type > 0 ? \'rotate(180deg)\' : \"\",
     animation: this.type == 2 ? \"spinner-spin 1s step-end infinite\" : \"\"
    };
   }
  },
  watch: {
   type(a, b) {
    if (b == 1) {
     this.type = 2;
    }
    if (a == 2) {
     this.flag = false;
     this.obj.setTranslate(0, 50);
     this.$emit(\"down\", () => {
      this.type = 0;
      this.obj.setTranslate(0, 0);
      this.obj.reLayout();
      this.nodata = false;
     });
    }
   }
  },
  methods: {
  reset(){
    this.obj.setTranslate(0, 0);
   },
   scrollstart() {
    if (this.obj.lastY <= 0) {
     this.flag = true;
    } else {
     this.Y = 0;
     this.flag = false;
    }
   },
   scroll() {
    if (this.down && this.flag) {
     this.type = this.obj.y > 50 ? 1 : 0;
     if (this.obj.y > 0) {
      this.Y = this.obj.y;
     }
    }
   },
   scrollbottom() {
    if (this.nodata || !this.up || this.type == 4) return;
    this.type = 4;
    this.$emit(\"up\", (n) => {
     this.type = 0;
     if (n == true) this.nodata = true;
     this.obj.reLayout();
    });
   }
  }
 }
</script>

tab的一个例子

<template>
 <div class=\"mypage\">
 
   <div class=\"fbjbox\">
    <div class=\"fbjbox1\">
    <tab ref=\"tab\" :list=\"[\'一级合伙人\'+count,\'二级合伙人\']\" width=\"50%\" @change=\"tabchange\" />
   </div>
   <div class=\"fbjbox2\">
    <template v-if=\"list!=null&&tab==0\">
      <h4 >一级合伙人总数{{count}}人</h4>
      <ul class=\"mui-table-view clear\">
       <li class=\"mui-table-view-cell mui-media\" v-for=\"item in list\">
        <img class=\"mui-media-object mui-pull-left circle\" v-bind:src=\"item.head_url\" />
         <div class=\"mui-media-body\">
          {{item.vname}}
          <p class=\'mui-ellipsis\'>{{item.identity}}</p>
         </div>
       </li>
       
     </ul> 
     
    </template>
    <template v-if=\"list!=null&&tab==1\">     
     <h4 >二级合伙人总数{{count}}人</h4>
      <ul class=\"mui-table-view clear\">
       <li class=\"mui-table-view-cell mui-media\" v-for=\"item,index in list\">
         <div class=\"mui-media-body\" v-cloak>
          {{type(index)}}人数<p class=\"mui-pull-right\">{{item}}</p>
         </div>
       </li>
       
      </ul> 
    </template>
    <!--<template v-if=\"list==null\">
     <div class=\" mui-text-center\" style=\"padding: 50px;\">
      
     <span class=\"mui-spinner\"></span>
     </div>
    </template>-->
    <template v-if=\"list==[]\">
     <div>暂无下线</div>
    </template>
   </div>
  </div>
 
 </div>
</template>
<style scoped=\"\">
p{color:#807E7E}
 .circle{margin-top:0px}
 .mypage{height:100%;}
 .mui-table-view .mui-media-object { line-height: 45px; max-width: 45px; height: 45px; }
 
</style>
<script>
import tab from \"../public/tab\"
import pull from \"../public/pull\"
 export default {
  mounted() {
   this.changemes();
  },
  components: {tab,pull},
  data() {
   return {
     tab:0,
     count:0,
     list: []
   }
  },
   computed:{   
   cmd:function(){
    switch(this.tab){
     case 0: return \"Member/oneLevel\";
     case 1: return \"Member/twoLevel\";
    }
    
   } 
  },
   methods: {
    type(num){   
    switch (~~num) {
     case 1: return \"游客\";
     case 2: return \"用户\";
     case 3: return \"粉丝\";
     case 4: return \"美人\";
     case 5: return \"卖手\";
     case 6: return \"合伙人\";
     case 7: return \"加盟商\";
    }
     return \"未知\";
    },
   tabchange({index, data}) {
    this.tab = index;
    },
   changemes(){
    this.list=null;
     this.$api(this.cmd).then(list => { 
      this.count=list.count;
      this.list=list.list;
     
    });
   }
  },
  watch:{
   tab:function(){
    this.changemes(); 
   }
  }
 }
</script>

以上这篇vue刷新和tab切换实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。