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:'商品详情'}" 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>