今天优化了一下风琴页的效果，之前用的是jq的hide和show方法，有风琴的切换效果，但是没有选中的效果，这个是之前的代码，当然可以在家以对选中状态的样式变化的效果，麻烦没加，
Popup() {
$("ul")
.find(".left-nape")
.click(function() {
$(this)
.find("ul")
.show();
$(this)
.find(".let-nape-list")
.css("border-left", " 3px solid rgba(255, 255, 255, 1)");
$(this)
.find("span")
.attr("class", "fa fa-angle-down fa-lg");
$(this)
.siblings()
.find("ul")
.hide();
$(this)
.siblings()
.find(".let-nape-list")
.css("border-left", " 3px solid rgba(255, 255, 255, 0)");
$(this)
.siblings()
.find("span")
.attr("class", "fa fa-angle-right fa-lg");
});
},
今天在坑乎搜东西发现师兄们写左边的导航切换都用的风琴页的效果就百度了一下，发现就是三元表达式加for循环，你别说，代码少写一大半，虽然这些都会就是没想到这么写。 优化后的写法，主要是清晰一目了然，html部分也换成了v-for渲染数据（在data自建数组数据），这样写代码少写了70%左右，蠢那，学了不知道用
methods: {
//风琴页的选中效果
checkitem(item, index) {
const that = this;
if (that.organ === index) {
return;
} else {
that.organ = index; //对于父级风琴按钮的赋值，标签内用三元表达式判断，绑定效果类名实现选中效果
that.organson = undefined; //每次点击父级的导航按钮把子级的选中状态指控，后期优化成数组的形式，做到单状态的管理
}
},
checkson(item, mess) {
const that = this;
console.log(that.organson === mess);
if (that.organson === mess) {
return;
} else {
that.organson = mess; //子级风琴的选中状态的下标赋值，三元表达式绑定类名，暂用统一的变量，后期优化到vuex中使用数组管理状态的切换
}
console.log(that.organson === mess);
}
}
最近遇到的问题： 条件查询的函数单独写的，但是有个问题（请求方法和请求不成功的返回值没复制）就是数据处理的函数在函数内应用会有个优先级，提升倒是最前面执行，我重新赋值的变量对数据处理的结果没有产生想要的影响。师兄有没有什么办法能做到函数在变量赋值之后再执行，要是没有我就换思路了
requestData() {
//从接口获取数据的函数，在生命周期函数中调用，在页面刷新时执行
this.$axios({//页面跳转数据宣布渲染
params: {
page: this.currentPage,
size: this.pageSize
}
})
.then(resp => {
this.resp = resp.data.data; //赋值给resp用来计算分页数
this.message = resp.data.data.articleList; //数据用来渲染到页面
this.treat();
})
},
seek() { //条件查询的函数
this.$axios({
params: {
type: 0
}
})
.then(resp => {
this.resp = resp.data.data; //赋值给resp用来计算分页数
this.message = resp.data.data.articleList; //数据用来渲染到页面
this.treat();
console.log(this.resp);
})
},
treat() {//数据处理
for (let a = 0; a < this.message.length; a++) {
//时间转换
this.message[a].createAt = new Date( //发布时间通过jq的方法转换成24小时制
this.message[a].createAt
).toLocaleString("chinese", { hour12: false });
this.message[a].updateAt = new Date( //发修改间通过jq的方法转换成24小时制
this.message[a].updateAt
).toLocaleString("chinese", { hour12: false });
}
if (this.size.length == 0 || this.pageSize !== 10) {
if (this.pageSize !== 10) {
//设置改变时size和循环的b重置重新赋值
this.size.length = 0;
b = 1;
}
for (var b = 1; b <= Math.ceil(this.resp.total / this.pageSize); b++) {
this.size.push(b); //for计算分页的数量，通过数据总数除以单页数据量
console.log(this.resp.total);
}
}
返回列表
评论