vue刷新和tab切换实例


Posted in Javascript onFebruary 11, 2018

首先写个子组件用来放刷新的内容,命名为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切换实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 技巧大全(新手入门篇)
May 12 Javascript
javascript学习笔记(六) Date 日期类型
Jun 19 Javascript
JavaScript实现动画打开半透明提示层的方法
Apr 21 Javascript
js表单提交和submit提交的区别实例分析
Dec 10 Javascript
javascript如何实现360度全景照片问题汇总
Apr 04 Javascript
Javascript 5种方法实现过滤删除前后所有空格
Jun 22 Javascript
jquery单击文字或图片内容放大并居中显示
Jun 23 jQuery
Vue发布项目实例讲解
Jul 17 Javascript
js cavans实现静态滚动弹幕
May 21 Javascript
解决vue cli4升级sass-loader(v8)后报错问题
Jul 30 Javascript
js实现购物车商品数量加减
Sep 21 Javascript
uniapp开发小程序的经验总结
Apr 08 Javascript
详解如何在vue项目中引入elementUI组件
Feb 11 #Javascript
vue-router配合ElementUI实现导航的实例
Feb 11 #Javascript
vue页面跳转后返回原页面初始位置方法
Feb 11 #Javascript
使用vue-router设置每个页面的title方法
Feb 11 #Javascript
解决使用Vue.js显示数据的时,页面闪现原始代码的问题
Feb 11 #Javascript
ajax请求+vue.js渲染+页面加载的示例
Feb 11 #Javascript
vue.js,ajax渲染页面的实例
Feb 11 #Javascript
You might like
Laravel使用Caching缓存数据减轻数据库查询压力的方法
2016/03/15 PHP
PHP实现的获取文件mimes类型工具类示例
2018/04/08 PHP
PHP的new static和new self的区别与使用
2019/11/27 PHP
一些常用弹出窗口/拖放/异步文件上传等实用代码
2013/01/06 Javascript
使用Grunt.js管理你项目的应用说明
2013/04/24 Javascript
javascript ready和load事件的区别示例介绍
2013/08/30 Javascript
js的onload事件及初始化按钮事件示例代码
2013/09/25 Javascript
jQuery异步验证用户名是否存在示例代码
2014/05/21 Javascript
第一次接触Bootstrap框架
2016/10/24 Javascript
jQuery实现获取隐藏div高度的方法示例
2017/02/09 Javascript
解决jQuery ajax动态新增节点无法触发点击事件的问题
2017/05/24 jQuery
JS利用正则表达式实现简单的密码强弱判断实例
2017/06/16 Javascript
CSS3 动画卡顿性能优化的完美解决方案
2018/09/20 Javascript
微信小程序开发的基本流程步骤
2019/01/31 Javascript
基于layui实现高级搜索(筛选)功能
2019/07/26 Javascript
jquery 遍历hash操作示例【基于ajax交互】
2019/10/12 jQuery
JavaScript中的全局属性与方法深入解析
2020/06/14 Javascript
[55:02]2014 DOTA2国际邀请赛中国区预选赛 HGT VS Orenda
2014/05/21 DOTA
[01:10]DOTA2次级职业联赛 - U5战队宣传片
2014/12/01 DOTA
探寻python多线程ctrl+c退出问题解决方案
2014/10/23 Python
Python实现中文数字转换为阿拉伯数字的方法示例
2017/05/26 Python
numpy中实现ndarray数组返回符合特定条件的索引方法
2018/04/17 Python
Python3+Appium实现多台移动设备操作的方法
2019/07/05 Python
PyTorch中topk函数的用法详解
2020/01/02 Python
Python爬虫实现自动登录、签到功能的代码
2020/08/20 Python
Selenium+BeautifulSoup+json获取Script标签内的json数据
2020/12/07 Python
美国最大的旗帜经销商:Carrot-Top
2018/02/26 全球购物
英国标准协会商店:BSI Shop
2019/02/25 全球购物
金鑫耀Java笔试题
2014/09/06 面试题
协议书与合同的区别
2014/04/18 职场文书
调查研究项目计划书
2014/04/29 职场文书
党支部综合考察意见
2015/06/01 职场文书
情侣餐厅的创业计划书范本!
2019/07/26 职场文书
SpringBoot生成License的实现示例
2021/06/16 Java/Android
python识别围棋定位棋盘位置
2021/07/26 Python
pycharm无法安装cv2模块问题
2022/05/20 Python