Implement refresh and tab switching in vue

<template>

   <p class="fbjbox container">

   <p class="fbjbox1">

  <tab ref=&#39;tab&#39; :list="[&#39;推荐&#39;,&#39;热门&#39;,&#39;最新&#39;]" width="33%" @change=&#39;tabchange&#39; style="float:left"/>

 <span class="price" width="33%" @tap="change" >价格<span class="mui-icon mui-icon-arrowright"></span></span> //点击价格会排序

   </p>

  <p class="fbjbox2">

   <pull up="true" down="true" @up="next" @down="shuaxin" ref="pull">

    <p class="mui-row mui-col-xs-12 mui-clearfix">

      <span class="mui-col-xs-6" v-href="{name:&#39;商品详情&#39;}" rel="external nofollow" v-for="item in list">

       <p class="img"><img v-bind:src="item.goods_image"/></p>

       <h4>{{item.goods_name}}</h4>

       <p class="red1">￥{{item.goods_price}}</p>

      </span>

     </p>

   </pull>

  </p>

</p>

</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>

<template>

 <p class="mui-scroll-wrapper" ref="box" v-bind:style="{top:top+&#39;px&#39;}">

  <p class="mui-pull-top-pocket mui-block" v-bind:class="{&#39;mui-visibility&#39;:obj.y>0}" v-if="down">

   <p class="mui-pull" v-show="flag">

    <p class="mui-pull-loading mui-icon" v-bind:class="{&#39;mui-spinner&#39;: type==2,&#39;mui-icon-pulldown&#39;:type!=2}" v-bind:style="css1"></p>

    <p class="mui-pull-caption" v-if="type==0">下拉可以刷新</p>

    <p class="mui-pull-caption" v-if="type==1">释放立即刷新</p>

    <p class="mui-pull-caption" v-if="type==2">正在刷新</p>

   </p>

  </p>

  <p class="mui-scroll" @scrollstart.self="scrollstart" @scroll.self="scroll" @scrollbottom="scrollbottom">

   <slot>

    <p class="no-content">

     <i></i>

     <h4>暂无内容</h4>

    </p>

   </slot>

   <p class="mui-pull-bottom-pocket mui-block mui-visibility" v-if="type==4">

    <p class="mui-pull">

     <p 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;"></p>

<p class="mui-pull-caption mui-visibility">正在加载...</p>

</p>

</p>

<!--<p v-if="nodata" class="nodata">已经没有更多数据</p>-->

<p v-if="nodata" class="yqxtsdkn"></p>

</p>

</p>

</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>

<template>

 <p class="mypage">

   <p class="fbjbox">

    <p class="fbjbox1">

    <tab ref="tab" :list="[&#39;一级合伙人&#39;+count,&#39;二级合伙人&#39;]" width="50%" @change="tabchange" />

   </p>

   <p 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" />

         <p class="mui-media-body">

          {{item.vname}}

          <p class=&#39;mui-ellipsis&#39;>{{item.identity}}</p>

         </p>

       </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">

         <p class="mui-media-body" v-cloak>

          {{type(index)}}人数<p class="mui-pull-right">{{item}}</p>

         </p>

       </li>

      </ul>

    </template>

    <!--<template v-if="list==null">

     <p class=" mui-text-center" style="padding: 50px;">

     <span class="mui-spinner"></span>

     </p>

    </template>-->

    <template v-if="list==[]">

     <p>暂无下线</p>

    </template>

   </p>

  </p>

 </p>

</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>