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 相关文章推荐
将函数的实际参数转换成数组的方法
Jan 25 Javascript
有关js的变量作用域和this指针的讨论
Dec 16 Javascript
showModalDialog模态对话框的使用详解以及浏览器兼容
Jan 11 Javascript
JQuery中操作Css样式的方法
Feb 12 Javascript
理解javascript异步编程
Jan 27 Javascript
Node.js与MySQL交互操作及其注意事项
Oct 05 Javascript
微信小程序 vidao实现视频播放和弹幕的功能
Nov 02 Javascript
js 单引号替换成双引号,双引号替换成单引号的实现方法
Feb 16 Javascript
JavaScript标准对象_动力节点Java学院整理
Jun 27 Javascript
JavaScript 日期时间选择器一些小结
Apr 02 Javascript
JS求解两数之和算法详解
Apr 28 Javascript
jQuery实现二级导航菜单的示例
Sep 30 jQuery
详解如何在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
全国FM电台频率大全 - 3 河北省
2020/03/11 无线电
Windows下PHP5和Apache的安装与配置
2006/09/05 PHP
php使用substr()和strpos()联合查找字符串中某一特定字符的方法
2015/05/12 PHP
Yii 2中的load()和save()示例详解
2017/08/03 PHP
php 中self,this的区别和操作方法实例分析
2019/11/04 PHP
解决jquery的datepicker的本地化以及Today问题
2012/05/23 Javascript
本地图片预览(支持IE6/IE7/IE8/Firefox3)经验总结
2013/03/25 Javascript
探讨在JQuery和Js中,如何让ajax执行完后再继续往下执行
2013/07/09 Javascript
初始Nodejs
2014/11/08 NodeJs
jquery实现用户打分评分特效
2015/05/28 Javascript
Jquery简单实现GridView行高亮的方法
2015/06/15 Javascript
JS组件Bootstrap Table布局详解
2016/05/27 Javascript
jQuery简单实现title提示效果示例
2016/08/01 Javascript
Bootstrap轮播图的使用和理解4
2016/12/14 Javascript
Extjs表单输入框异步校验的插件实现方法
2017/03/20 Javascript
利用Angular.js编写公共提示模块的方法教程
2017/05/28 Javascript
Angular实现搜索框及价格上下限功能
2018/01/19 Javascript
vux uploader 图片上传组件的安装使用方法
2018/05/15 Javascript
Angular实现模版驱动表单的自定义校验功能(密码确认为例)
2018/05/17 Javascript
React学习之JSX与react事件实例分析
2020/01/06 Javascript
Python NumPy库安装使用笔记
2015/05/18 Python
python3操作微信itchat实现发送图片
2018/02/24 Python
python 每天如何定时启动爬虫任务(实现方法分享)
2018/05/21 Python
Python中Numpy mat的使用详解
2019/05/24 Python
让Python脚本暂停执行的几种方法(小结)
2019/07/11 Python
python实现中文文本分句的例子
2019/07/15 Python
Pytorch环境搭建与基本语法
2020/06/03 Python
Python爬虫HTPP请求方法有哪些
2020/06/03 Python
Python pandas对excel的操作实现示例
2020/07/21 Python
DELPHI面试题研发笔试试卷
2015/11/08 面试题
应聘自荐书
2013/10/08 职场文书
聚美优品广告词改编
2014/03/14 职场文书
初中学生期末评语
2014/04/24 职场文书
写给女朋友的检讨书
2015/05/06 职场文书
2015年高校教师个人工作总结
2015/05/25 职场文书
2015秋季运动会通讯稿
2015/07/18 职场文书