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切换实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

您可能感兴趣的文章:

  • 详解使用vue实现tab 切换操作
  • Vue2.0 多 Tab切换组件的封装实例
(0)

相关推荐

  • 详解使用vue实现tab 切换操作

    在使用jQuery类库实现tab功能时,是获取鼠标在mousenter或click时的index值,然后切换到当前的标题和内容,把其他的标题和内容的状态去掉: $('.tab .title').find('.item') .removeClass('current').eq(index).addClass('current'); // 为index位置的title添加current $('.tab .content').find('.item') .hide().eq(index).show()

  • Vue2.0 多 Tab切换组件的封装实例

    Vue2.0 多 Tab切换组件简单封装,满足自己简单的功能,可以直接拿去使用! 首先上效果图: 功能简单介绍: 1.支持tab切换 2.支持tab定位 3.支持tab自动化 仿React多Tab实现,总之可以正常使用满足日常需求, 1.使用方法: ==index.vue文件== <TabItems> <div name="买入" class="first"> <Content :isContTab = "0" /&

  • vue刷新和tab切换实例

    首先写个子组件用来放刷新的内容,命名为pull(可以看例子最后面放的.) 然后再要刷新的页面引用 <template> <div class="fbjbox container"> <div class="fbjbox1"> <tab ref='tab' :list="['推荐','热门','最新']" width="33%" @change='tabchange' style=&qu

  • Vue实现选项卡tab切换制作

    本文实例为大家分享了Vue实现选项卡tab切换制作代码,供大家参考,具体内容如下 1.主要的实现功能如下:(点击进行切换,这里我不做太多的样式处理了,主要看功能) 2.话不多说:主要看代码实现 <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>选项卡制作</title>     <!-

  • 最简单的tab切换实例代码

    JS: $(".con").eq(0).show(); $(".btn span").click(function(){ var num =$(".btn span").index(this); $(".con").hide(); $(".con").eq(num).show().slblings().hide(); }) CSS: body { cursor:default; -webkit-text-s

  • Vue.js实现tab切换效果

    Vue是一个小巧轻便的JavaScript库.它有一个简单易懂的API,能够让开发者在开发web应用的时候更加简易便捷.实际上,一直让Vue引以为豪的是它的便捷性.执行力.灵活性. 目前在学习Vue.js.在学习的时候需要把手动操作DOM的思维去掉,因为Vue是数据驱动,不需要手动操作DOM.他通过一些特殊的hmtl语法,将DOM和数据绑定起来.一旦创建了绑定,DOM就会和数据保持同步,每当变更了数据,DOM也会相应的发生改变,更新. 下面是我用vue.js来实现的tab切换功能. <!--这里

  • Vue.js 实现tab切换并变色操作讲解

    在实现这个功能时借鉴的原博主的方法没有实现切换变色,琢磨了好久终于知道了怎么切换变色(小菜鸟的咆哮)!!!记录下来以供参考,以下是vue的完整tab页切换并变色的代码框架. ​<template> <div > //tab页切换按钮部分 <ul > <li v-for="(item,index) in navList" :class = "{active:!(index- menuIndex)}" @click = 'men

  • 使用jquery实现div的tab切换实例代码

    jQuery实现Tab切换 接触jQ不久以前的js代码来写的简单效果现在用jQ来写: HTML代码: 复制代码 代码如下: <div id="sidebar-tab"> <div id="tab-title"> <h3><span class="selected">最新评论</span><span>近期热评</span><span>随机文章</s

  • vue移动端路由切换实例分析

    在写移动端时,因为需要给页面做转场动画,便有了这次的研究 其中最主要的时以下两个问题: 浏览器导航栏的切换 IOS 上滑动切换时,会有两次页面的转场动画,一次自身滑动时进行的切换,随后触发我们设置的转场动画. 除了上面两个问题,其余的操作都是可以在页面内进行设置,基本都是可控的.主要就是解决上面两个问题. 可以看下实际写出来的效果:在线DEMO 1. 浏览器导航栏的切换 通过记录 历史记录 来比较判断前进还是后退 如下例子 A页面 -> B页面 -> C页面 假如我从 A页面到 B页面 再到C

  • 基于jquery tab切换(防止页面刷新)

    在网上找了很多jquery效果,都是这样的,于是自己写了一个.防止页面刷新的tab切换, html代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999

  • vue实现tab切换外加样式切换方法

    实例如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; list-style: none } #app { width: 504px; height: 300px; margin: 100

  • VUE前后端学习tab写法实例

    动态创建一个tab,里面放一个table,这样一个后台管理的基本功能(之一)就出来了. 好吧,这里其实只是试试水,感受一下vue的数据驱动可以怎么玩,通过一个个实例学习一下vue的各个知识点.这里要看看方法和css如何设置. 一.目标 1.  可以动态创建tab. 2.  可以切换(废话).可以关闭tab. 3.  Css的设置. 4.  方法的处理方式. 5.  效果图 二.思路 应该有好多种方式可以实现,这里先试一个,其他的以后再说. 还是数据驱动,那么就建立一个大的数据包,把tab信息和t

随机推荐