首先写个子组件用来放刷新的内容，命名为pull（可以看例子最后面放的。）
然后再要刷新的页面引用
<template> <div> <div> <tab ref='tab' :list="['推荐','热门','最新']" @change='tabchange'/> <span @tap="change" >价格<span></span></span> //点击价格会排序 </div> <div> <pull up="true" down="true" @up="next" @down="shuaxin" ref="pull"> <div> <span v-href="{name:'商品详情'}" v-for="item in list"> <div><img v-bind:src="item.goods_image"/></div> <h4>{{item.goods_name}}</h4> <p>￥{{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 ref="box" v-bind:style="{top:top+'px'}"> <div v-bind:class="{'mui-visibility':obj.y>0}" v-if="down"> <div v-show="flag"> <div v-bind:class="{'mui-spinner': type==2,'mui-icon-pulldown':type!=2}" v-bind:style="css1"></div> <div v-if="type==0">下拉可以刷新</div> <div v-if="type==1">释放立即刷新</div> <div v-if="type==2">正在刷新</div> </div> </div> <div @scrollstart.self="scrollstart" @scroll.self="scroll" @scrollbottom="scrollbottom"> <slot> <div> <i></i> <h4>暂无内容</h4> </div> </slot> <div v-if="type==4"> <div> <div></div> <div>正在加载...</div> </div> </div> <!--<div v-if="nodata">已经没有更多数据</div>--> <div v-if="nodata"></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的一个例子