下面我就为大家分享一篇vue刷新和tab切换实例，具有很好的参考价值，希望对大家有所帮助。

首先写个子组件用来放刷新的内容，命名为pull(可以看例子最后面放的。)

然后再要刷新的页面引用

价格 //点击价格会排序

{{item.goods_name}}

￥{{item.goods_price}}

/*选项卡的颜色*/

.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}

.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;}

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(() => { });

},

}

}

下面是命名为pull的子组件。

下拉可以刷新

释放立即刷新

正在刷新

暂无内容

正在加载...

.mui-scroll-wrapper { position:relative;height:100%;}

.nodata { color:#efefef;text-align:center;margin-top:10px;line-height: 30px; font-size: 12px; background:#0B2E4C}

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();

});

}

}

}

tab的一个例子

一级合伙人总数{{count}}人

• {{item.vname}}

  {{item.identity}}

二级合伙人总数{{count}}人

• {{type(index)}}人数

  {{item}}

暂无下线

p{color:#807E7E}

.circle{margin-top:0px}

.mypage{height:100%;}

.mui-table-view .mui-media-object { line-height: 45px; max-width: 45px; height: 45px; }

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();

}

}

}

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：