当前位置：Gxlcms > JavaScript > 在vue中实现刷新和tab切换

在vue中实现刷新和tab切换

时间：2021-07-01 10:21:17 帮助过：14人阅读

下面我就为大家分享一篇vue刷新和tab切换实例，具有很好的参考价值，希望对大家有所帮助。

首先写个子组件用来放刷新的内容，命名为pull（可以看例子最后面放的。）

然后再要刷新的页面引用

  1. <template>
  2.    <p class="fbjbox container">
  3.    <p class="fbjbox1">
  4.   <tab ref='tab' :list="['推荐','热门','最新']" width="33%" @change='tabchange' style="float:left"/>
  5.  <span class="price" width="33%" @tap="change" >价格<span class="mui-icon mui-icon-arrowright"></span></span> //点击价格会排序
  6.    </p>
  7.   <p class="fbjbox2">
  8.    
  9.    <pull up="true" down="true" @up="next" @down="shuaxin" ref="pull">
  10.    
  11.     <p class="mui-row mui-col-xs-12 mui-clearfix">
  12.       <span class="mui-col-xs-6" v-href="{name:'商品详情'}" rel="external nofollow" v-for="item in list">
  13.        <p class="img"><img v-bind:src="item.goods_image"/></p>
  14.        <h4>{{item.goods_name}}</h4>
  15.        <p class="red1">￥{{item.goods_price}}</p>
  16.       </span>
  17.      </p>
  18.    
  19.    </pull>
  20.   
  21.   </p>
  22. </p>
  23. </template>
  24. <style>
  25.  /*选项卡的颜色*/
  26.  .tab{background:#fff;}
  27.  .tab a.active{color:#D83737; border-bottom: 2px solid #D83737;} 
  28.  .red1{color:red;font-size:15px;padding-left:10px}
  29.  h4{font-size:16px;font-weight:normal;color:#656565;padding-left:10px}
  30. </style>
  31. <style scoped>
  32.  .container{font-family: "微软雅黑";}
  33.  .mui-row{ overflow: hidden;margin-bottom: 20px;}
  34.  .mui-row .mui-col-xs-6{width:49%;background-color:#fff;overflow: hidden;margin-top:6px;text-align: left;}
  35.  .mui-row .mui-col-xs-6:nth-child(even){margin-left:2%;}
  36.  .mui-row img{width:100%;}
  37.  .mui-row .img{height:170px;}
  38. </style>
  39. <script>
  40. import tab from '../tab'
  41. import pull from '../public/pull'
  42.  export default {
  43.    created() {
  44.    this.height = window.innerWidth * 40 / 64;
  45.    this.is_zc = this.$route.query.is_zc == 1;
  46.    this.uid = localStorage.getItem('uid');
  47.    
  48.   
  49.   },
  50.   mounted(){
  51.     this.shuaxin(() => { });
  52.   
  53.   },
  54.   data() {
  55.     return {
  56.     tab:0,
  57.     list:[],
  58.    order:1 //order是排序。1的默认的，2从低到高，3从高到低
  59.    }
  60.   },
  61.   components: {tab,pull},
  62.   computed:{  //cmd也是一个变量 ，而且根据选项卡的不同而不同 
  63.    cmd:function(){
  64.     switch(this.tab){
  65.      case 0: return "Mp/goodsTuijian";
  66.      case 1: return "Mp/hotGoods";
  67.      case 2: return "Mp/newGoods";
  68.     }
  69.     
  70.    }
  71.   },
  72.   methods: {
  73.    tabchange({index, data}) {
  74.     this.tab = index;
  75.     },
  76.   shuaxin(done) { //首先进去以后的初始
  77.     this.$api(this.cmd, { page: 0,order:this.sort }).then(list => { //除了把页面传过去还需要把排序的方式传过去
  78.       this.list=list;
  79.      done();
  80.  //跳到一个新的选项卡时，页面从新从第一个.不是拉到的那个位置
  81.    if(this.$refs.pull){
  82.       this.$refs.pull.reset();
  83.       this.$refs.pull.nodata = false;
  84.       }
  85.     });
  86.    },
  87.   next(done) {
  88.     var page = this.list.length;
  89.     this.$api(this.cmd, { page,order:this.sort }).then(list => {
  90.      if (list.length == 0) { return done&&done(true);}  //这个里面如果只出现done(true)的话可能就是只显示没有数据了，不会出现正在加载中
  91.      this.list = this.list.concat(list);
  92.      done();
  93.     });
  94.    },
  95.   change(){ //点击价格时变化的class
  96.     if(this.sort==1){this.sort=2;}
  97.     else
  98.     if(this.sort==2){this.sort=3;}
  99.     else
  100.     if(this.sort==3){this.sort=1;}
  101.     this.shuaxin(() => { });
  102.    }
  103.    
  104.   },
  105.   watch:{   //监听。当选项卡改变的时候，刷新页面。
  106.    tab:function(){
  107.     this.shuaxin(() => { });
  108.     
  109.    },
  110.    
  111.   }
  112.  }
  113. </script>

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

  1. <template>
  2.  <p class="mui-scroll-wrapper" ref="box" v-bind:style="{top:top+'px'}">
  3.   <p class="mui-pull-top-pocket mui-block" v-bind:class="{'mui-visibility':obj.y>0}" v-if="down">
  4.    <p class="mui-pull" v-show="flag">
  5.     <p class="mui-pull-loading mui-icon" v-bind:class="{'mui-spinner': type==2,'mui-icon-pulldown':type!=2}" v-bind:style="css1"></p>
  6.     <p class="mui-pull-caption" v-if="type==0">下拉可以刷新</p>
  7.     <p class="mui-pull-caption" v-if="type==1">释放立即刷新</p>
  8.     <p class="mui-pull-caption" v-if="type==2">正在刷新</p>
  9.    </p>
  10.   </p>
  11.   <p class="mui-scroll" @scrollstart.self="scrollstart" @scroll.self="scroll" @scrollbottom="scrollbottom">
  12.    <slot>
  13.     <p class="no-content">
  14.      <i></i>
  15.      <h4>暂无内容</h4>
  16.     </p>
  17.    </slot>
  18.    <p class="mui-pull-bottom-pocket mui-block mui-visibility" v-if="type==4">
  19.     <p class="mui-pull">
  20.      <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>
  21. <p class="mui-pull-caption mui-visibility">正在加载...</p>
  22. </p>
  23. </p>
  24. <!--<p v-if="nodata" class="nodata">已经没有更多数据</p>-->
  25. <p v-if="nodata" class="yqxtsdkn"></p>
  26. </p>
  27. </p>
  28. </template>
  29. <style scoped>
  30.  .mui-scroll-wrapper { position:relative;height:100%;}
  31.  .nodata { color:#efefef;text-align:center;margin-top:10px;line-height: 30px; font-size: 12px; background:#0B2E4C}
  32. </style>
  33. <script>
  34.  export default {
  35.   mounted() {
  36.    var box = this.$refs.box;
  37.    this.obj = mui(box).scroll();
  38.   },
  39.   props: ["down", "up", "top"],
  40.   data() {
  41.    return {
  42.     flag: false,
  43.     Y: 0,
  44.     obj: {},
  45.     type: 0,
  46.     nodata: false
  47.    }
  48.   },
  49.   computed: {
  50.    css1() {
  51.     return {
  52.      transition: this.type > 0 ? '-webkit-transform 0.3s ease-in' : "",
  53.      transform: this.type > 0 ? 'rotate(180deg)' : "",
  54.      animation: this.type == 2 ? "spinner-spin 1s step-end infinite" : ""
  55.     };
  56.    }
  57.   },
  58.   watch: {
  59.    type(a, b) {
  60.     if (b == 1) {
  61.      this.type = 2;
  62.     }
  63.     if (a == 2) {
  64.      this.flag = false;
  65.      this.obj.setTranslate(0, 50);
  66.      this.$emit("down", () => {
  67.       this.type = 0;
  68.       this.obj.setTranslate(0, 0);
  69.       this.obj.reLayout();
  70.       this.nodata = false;
  71.      });
  72.     }
  73.    }
  74.   },
  75.   methods: {
  76.   reset(){
  77.     this.obj.setTranslate(0, 0);
  78.    },
  79.    scrollstart() {
  80.     if (this.obj.lastY <= 0) {
  81.      this.flag = true;
  82.     } else {
  83.      this.Y = 0;
  84.      this.flag = false;
  85.     }
  86.    },
  87.    scroll() {
  88.     if (this.down && this.flag) {
  89.      this.type = this.obj.y > 50 ? 1 : 0;
  90.      if (this.obj.y > 0) {
  91.       this.Y = this.obj.y;
  92.      }
  93.     }
  94.    },
  95.    scrollbottom() {
  96.     if (this.nodata || !this.up || this.type == 4) return;
  97.     this.type = 4;
  98.     this.$emit("up", (n) => {
  99.      this.type = 0;
  100.      if (n == true) this.nodata = true;
  101.      this.obj.reLayout();
  102.     });
  103.    }
  104.   }
  105.  }
  106. </script>

tab的一个例子

  1. <template>
  2.  <p class="mypage">
  3.  
  4.    <p class="fbjbox">
  5.     <p class="fbjbox1">
  6.     <tab ref="tab" :list="['一级合伙人'+count,'二级合伙人']" width="50%" @change="tabchange" />
  7.    </p>
  8.    <p class="fbjbox2">
  9.     <template v-if="list!=null&&tab==0">
  10.       <h4 >一级合伙人总数{{count}}人</h4>
  11.       <ul class="mui-table-view clear">
  12.        <li class="mui-table-view-cell mui-media" v-for="item in list">
  13.         <img class="mui-media-object mui-pull-left circle" v-bind:src="item.head_url" />
  14.          <p class="mui-media-body">
  15.           {{item.vname}}
  16.           <p class='mui-ellipsis'>{{item.identity}}</p>
  17.          </p>
  18.        </li>
  19.        
  20.      </ul> 
  21.      
  22.     </template>
  23.     <template v-if="list!=null&&tab==1">     
  24.      <h4 >二级合伙人总数{{count}}人</h4>
  25.       <ul class="mui-table-view clear">
  26.        <li class="mui-table-view-cell mui-media" v-for="item,index in list">
  27.          <p class="mui-media-body" v-cloak>
  28.           {{type(index)}}人数<p class="mui-pull-right">{{item}}</p>
  29.          </p>
  30.        </li>
  31.        
  32.       </ul> 
  33.     </template>
  34.     <!--<template v-if="list==null">
  35.      <p class=" mui-text-center" style="padding: 50px;">
  36.       
  37.      <span class="mui-spinner"></span>
  38.      </p>
  39.     </template>-->
  40.     <template v-if="list==[]">
  41.      <p>暂无下线</p>
  42.     </template>
  43.    </p>
  44.   </p>
  45.  
  46.  </p>
  47. </template>
  48. <style scoped="">
  49. p{color:#807E7E}
  50.  .circle{margin-top:0px}
  51.  .mypage{height:100%;}
  52.  .mui-table-view .mui-media-object { line-height: 45px; max-width: 45px; height: 45px; }
  53.  
  54. </style>
  55. <script>
  56. import tab from "../public/tab"
  57. import pull from "../public/pull"
  58.  export default {
  59.   mounted() {
  60.    this.changemes();
  61.   },
  62.   components: {tab,pull},
  63.   data() {
  64.    return {
  65.      tab:0,
  66.      count:0,
  67.      list: []
  68.    }
  69.   },
  70.    computed:{   
  71.    cmd:function(){
  72.     switch(this.tab){
  73.      case 0: return "Member/oneLevel";
  74.      case 1: return "Member/twoLevel";
  75.     }
  76.     
  77.    } 
  78.   },
  79.    methods: {
  80.     type(num){   
  81.     switch (~~num) {
  82.      case 1: return "游客";
  83.      case 2: return "用户";
  84.      case 3: return "粉丝";
  85.      case 4: return "美人";
  86.      case 5: return "卖手";
  87.      case 6: return "合伙人";
  88.      case 7: return "加盟商";
  89.     }
  90.      return "未知";
  91.     },
  92.    tabchange({index, data}) {
  93.     this.tab = index;
  94.     },
  95.    changemes(){
  96.     this.list=null;
  97.      this.$api(this.cmd).then(list => { 
  98.       this.count=list.count;
  99.       this.list=list.list;
  100.      
  101.     });
  102.    }
  103.   },
  104.   watch:{
  105.    tab:function(){
  106.     this.changemes(); 
  107.    }
  108.   }
  109.  }
  110. </script>

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

在vue中如何动态绑定表单元素的属性

在Vue中使用Vue.set动态新增对象属性方法

在vue2.0中没有dev-server.js下配置方法

以上就是在vue中实现刷新和tab切换的详细内容，更多请关注Gxl网其它相关文章！

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！