-
下面我就为大家分享一篇vue刷新和tab切换实例，具有很好的参考价值，希望对大家有所帮助。首先写个子组件用来放刷新的内容，命名为pull(可以看例子最后面放的。)然后再要刷新的页面引用价格 //点击价格会排序{{item....展开全文
下面我就为大家分享一篇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();
}
}
}
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
weixin_39715290 2020-12-22 13:35:09 -
Vuejs框架相关内容。业务情景描述后台界面，在点击左侧边栏的菜单的时候，导航...第三、我返回云产品订单，此时我查询的结果会销毁，因为我点击云产品订单这个tab页面切换的时候，执行的试重新listQuery操作。类似地...展开全文
Vuejs框架相关内容。
业务情景描述
后台界面，在点击左侧边栏的菜单的时候，导航栏会出现Tab页面，就像是这样(我以阿里云后台的一个场景截图为示例)：
第一、我在云产品页面中，按照一定时间查询出来之后，会出现查询结果。
第二、我点击万网产品订单，跳转到万网产品订单页面。
第三、我返回云产品订单，此时我查询的结果会销毁，因为我点击云产品订单这个tab页面切换的时候，执行的试重新listQuery操作。
类似地：
我如果选择了部分条件，但是没有点击查询，此时没有查询结果，但是我执行上述曹组的二三步骤，返回的时候，一样，下拉列表没有保存他们的选择状态。
类似地，文本输入框也不会这样。
需要解决的问题
综合上述两个业务场景，当返回的时候，文本输入框的值不变、下来选择菜单不变、以及查询的结果不变。保持第一次查询或者操作的状态。而不是再次渲染。
临时解决方案：
在路由中添加meta: { keepAlive: true }，劳动力比较大。暂时还没有其他的解决方案。
{
path: 'dashboardDemo',
component: _import('demo/dashboard/index'),
name: '仪表盘DEMO',
authority: 'dashboardDemo',
meta: { keepAlive: true }
}
weixin_39610956 2020-12-19 16:14:10 -
编写js结构：var tit=document.getElementById('tit');var lis1=tit.getElementsByTagName('li');// alert(lis1.length);//3var con=document.getElementById("con");var lis2=con.getElementsByTagName("li");...展开全文
编写js结构：
var tit=document.getElementById('tit');
var lis1=tit.getElementsByTagName('li');
// alert(lis1.length);//3
var con=document.getElementById("con");
var lis2=con.getElementsByTagName("li");
for (var i = 0; i < lis1.length; i++) {
//第一个for循环是给每个标题添加点击事件
lis1[i].οnclick=function () {
for (var i = 0; i < lis1.length; i++) {
//遍历每个标题找出当前点击得标题
lis1[i].className="";
lis2[i].className="";
if (lis1[i]==this) {//this指向当前点击得标题
lis1[i].className="select";
lis2[i].className="show";
};
};
}
};
weixin_39962758 2020-12-22 13:35:30 -
项目中TagsView组件用于tab页面切换，在项目中已使用keep-alive，目标页面也开启了“缓存”标志，但是在tab标签点击切换时，有几个页面数据还是刷新了。查找了相关资料，最终找到了一个【页签缓存】的资料，原来主要...展开全文
项目中TagsView组件用于tab页面切换，在项目中已使用keep-alive，目标页面也开启了“缓存”标志，但是在tab标签点击切换时，有几个页面数据还是刷新了。查找了相关资料，最终找到了一个【页签缓存】的资料，原来主要的问题就出在 “path” 和 “name” 没有完全匹配。
【页签缓存】
由于目前 keep-alive 和 router-view 是强耦合的，而且查看文档和源码不难发现 keep-alive 的 include (opens new window)默认是优先匹配组件的 name ，所以在编写路由 router 和路由对应的 view component 的时候一定要确保 两者的 name 是完全一致的。(切记 name 命名时候尽量保证唯一性 切记不要和某些组件的命名重复了，不然会递归引用最后内存溢出等问题)//router 路由声明 { path: 'config', component: ()=>import('@/views/system/config/index'), name: 'Config', meta: { title: '参数设置', icon: 'edit' } }//路由对应的view system/config/index export default { name: 'Config' }一定要保证两着的名字相同，切记写重或者写错。默认如果不写 name 就不会被缓存
gtosky4u 2021-05-27 09:19:34 -
weixin_39854288 2021-01-30 13:48:37
-
AGCA_ZXL 2021-04-16 20:16:16
-
weixin_39958138 2020-12-19 12:13:27
-
weixin_28861381 2021-01-13 12:29:42
-
weixin_30561959 2020-12-30 01:35:20
-
qq_33769914 2017-03-04 17:27:17
-
weixin_39608559 2020-12-22 13:35:26
-
u013065556 2021-06-18 16:18:35
-
junhua_xu 2019-08-20 14:56:35
-
qq_25040155 2020-07-17 13:58:53
-
m0_46156566 2020-06-18 19:10:42
vue
订阅