下面我就为大家分享一篇vue刷新和tab切换实例，具有很好的参考价值，希望对大家有所帮助。
首先写个子组件用来放刷新的内容，命名为pull（可以看例子最后面放的。）
然后再要刷新的页面引用
<template>
<p class="fbjbox container">
<p 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> //点击价格会排序
</p>
<p class="fbjbox2">
<pull up="true" down="true" @up="next" @down="shuaxin" ref="pull">
<p 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">
<p class="img"><img v-bind:src="item.goods_image"/ alt="在vue中实现刷新和tab切换" ></p>
<h4>{{item.goods_name}}</h4>
<p class="red1">￥{{item.goods_price}}</p>
</span>
</p>
</pull>
</p>
</p>
</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>
<p class="mui-scroll-wrapper" ref="box" v-bind:style="{top:top+'px'}">
<p class="mui-pull-top-pocket mui-block" v-bind:class="{'mui-visibility':obj.y>0}" v-if="down">
<p class="mui-pull" v-show="flag">
<p class="mui-pull-loading mui-icon" v-bind:class="{'mui-spinner': type==2,'mui-icon-pulldown':type!=2}" v-bind:style="css1"></p>
<p class="mui-pull-caption" v-if="type==0">下拉可以刷新</p>
<p class="mui-pull-caption" v-if="type==1">释放立即刷新</p>
<p class="mui-pull-caption" v-if="type==2">正在刷新</p>
</p>
</p>
<p class="mui-scroll" @scrollstart.self="scrollstart" @scroll.self="scroll" @scrollbottom="scrollbottom">
<slot>
<p class="no-content">
<i></i>
<h4>暂无内容</h4>
</p>
</slot>
<p class="mui-pull-bottom-pocket mui-block mui-visibility" v-if="type==4">
<p class="mui-pull">
<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>
<p class="mui-pull-caption mui-visibility">正在加载...</p>
</p>
</p>
<!--<p v-if="nodata" class="nodata">已经没有更多数据</p>-->
<p v-if="nodata" class="yqxtsdkn"></p>
</p>
</p>
</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>
<p class="mypage">
<p class="fbjbox">
<p class="fbjbox1">
<tab ref="tab" :list="['一级合伙人'+count,'二级合伙人']" width="50%" @change="tabchange" />
</p>
<p 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" / alt="在vue中实现刷新和tab切换" >
<p class="mui-media-body">
{{item.vname}}
<p class='mui-ellipsis'>{{item.identity}}</p>
</p>
</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">
<p class="mui-media-body" v-cloak>
{{type(index)}}人数<p class="mui-pull-right">{{item}}</p>
</p>
</li>
</ul>
</template>
<!--<template v-if="list==null">
<p class=" mui-text-center" style="padding: 50px;">
<span class="mui-spinner"></span>
</p>
</template>-->
<template v-if="list==[]">
<p>暂无下线</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/code/11184" title="睿拓智能网站系统-网上商城"><img
src="https://img.php.cn/upload/webcode/000/000/012/176525641780533.jpg" alt="睿拓智能网站系统-网上商城" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/code/11184" title="睿拓智能网站系统-网上商城">睿拓智能网站系统-网上商城</a>
<p>睿拓智能网站系统-网上商城1.0免费版软件大小:5M运行环境：asp+access本版本是永州睿拓信息专为电子商务入门级用户开发的网上电子商城系统，拥有产品发布，新闻发布，在线下单等全部功能，并且正式商用用户可在线提供多个模板更换，可实现一般网店交易所有功能，是中小企业和个人开展个人独立电子商务商城最佳的选择，以下为详细功能介绍：1.最新产品-提供最新产品发布管理修改，和最新产品订单查看2.推荐产</p>
</div>
<a href="/xiazai/code/11184" title="睿拓智能网站系统-网上商城" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
</template>
</p>
</p>
</p>
</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>上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
