vue刷新和tab切换实例

2018-02-17 19:16:16来源:作者:人点击

分享

首先写个子组件用来放刷新的内容,命名为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切换组件的封装实例

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台