css3transiton 的使用
<template>
<transition name="slide">
<div class="search_page">
123
</transition>
</template>
<script>
export default {
name: "SearchPage",
components: {
SearchHeader,
[Icon.name]: Icon,
VueBetterScroll,
CourseItem,
NoData,
},
data() {
return {
isFocus: true,
noBlur: true,
searchText: "",
historyList: [],
accessToken: parseParam(window.location.href).accessToken || "",
// VueBetterScroll 配置
scrollbarObj: {
fade: true,
},
pullDownRefreshObj: {
threshold: 90,
stop: 40,
},
pullUpLoadObj: {
threshold: 0,
txt: {
more: "加载更多",
noMore: "没有更多数据了",
},
},
startY: 0,
scrollToX: 0,
scrollToY: 0,
scrollToTime: 700,
items: [],
pageSize: 20,
pageNum: 1,
};
},
props: {
searchState: {
type: Boolean,
default: false,
},
},
watch: {
searchState(newVal) {
if (newVal) {
this.$refs.SearchHeader.$refs.searchInput.focus();
} else {
this.$refs.SearchHeader.$refs.searchInput.blur();
}
},
isFocus(newVal) {
// 获取焦点后查询当前用户的历史记录
if (newVal) {
this.getSearchDataList();
}
},
},
mounted() {
this.getSearchDataList();
},
methods: {
goBack() {
this.$emit("goBack");
},
handleFocus(state) {
if (state) this.noBlur = true;
this.isFocus = state;
},
handleSearch() {
console.log(this.searchText);
this.$refs.SearchHeader.$refs.searchInput.blur();
this.noBlur = false;
this.saveSearchData();
this.onPullingDown();
},
historyClick(item) {
this.searchText = item.content;
this.isFocus = false;
this.noBlur = false;
this.onPullingDown();
},
// 查询历史记录
async getSearchDataList() {
const response = await this.$request(API.studyCenter.getSearchDataList, {
method: "get",
params: {
accessToken: this.accessToken,
flag: 1,
},
});
this.historyList = [...((response && response.result) || [])];
},
// 删除历史记录
async delSearchDataList() {
const response = await this.$request(API.studyCenter.delSearchDataList, {
method: "get",
params: {
accessToken: this.accessToken,
flag: 1,
},
});
if (response && response.code === 200) this.historyList = [];
},
// 添加历史数据
async saveSearchData() {
await this.$request(API.studyCenter.saveSearchData, {
method: "get",
params: {
accessToken: this.accessToken,
flag: 1,
content: this.searchText,
},
});
},
// 数据请求
getListData(params) {
const that = this;
const { pageNum } = params;
return that
.$request(API.studyCenter.getLessonDataList, {
method: "get",
params: {
accessToken: this.accessToken,
page: pageNum,
rows: that.pageSize,
typeId: 0,
text: this.searchText,
},
})
.then((res) => {
return new Promise((resolve) => {
resolve(res);
});
});
},
onPullingDown() {
this.pageNum = 1;
this.getListData({ pageNum: this.pageNum }).then((response) => {
this.items = [];
const { result = [], totalNum } = response;
this.items = [...result];
if (Math.ceil(totalNum / this.pageSize) === this.pageNum) {
this.$refs.search_scroll.forceUpdate(false);
} else {
this.$refs.search_scroll.forceUpdate(true);
}
});
},
onPullingUp() {
this.pageNum++;
this.getListData({ pageNum: this.pageNum }).then((response) => {
const { result = [], totalNum } = response;
this.items = this.items.concat(result);
if (Math.ceil(totalNum / this.pageSize) === this.pageNum) {
this.$refs.search_scroll.forceUpdate(false);
} else {
this.$refs.search_scroll.forceUpdate(true);
}
});
},
touchstart(ev) {
addClass(ev.currentTarget, "icon_on");
},
touchend(ev) {
removeClass(ev.currentTarget, "icon_on");
},
// 跳转详情 回来刷新局部
bindReload(nub) {
if (nub === 1) {
window.reload = () => {
console.log("第二个页面");
this.onPullingDown();
};
}
},
},
};
</script>
<style lang="scss" scoped>
@import "~assets/css/mixins";
.search_page {
position: fixed;
top: 0;
bottom: 0;
left: 0;
width: 100%;
background: $color-white;
z-index: 200;
box-shadow: 0px 0px 40px rgba(128, 128, 128, 0.4);
&.slide-enter-active,
&.slide-leave-active {
transition: all 0.3s;
transform: translate3d(0, 0, 0);
}
&.slide-enter,
&.slide-leave-to {
transform: translate3d(100%, 0, 0);
}
.search_content {
position: absolute;
left: 0;
top: 88px;
bottom: 0;
right: 0;
width: 100%;
.history_wrap {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow-y: auto;
background: $color-white;
z-index: 201;
.title {
margin-top: 28px;
font-size: 24px;
color: $color-n2-5;
align-items: center;
padding: 0 32px;
@include flex-r();
@include flex-justify();
.icon_wrap {
width: 44px;
height: 44px;
@include flex-r();
@include flex-center();
&.icon_on {
background: $color-faint-Black;
}
}
}
.history_lists {
// width: 100%;
padding-left: 32px;
display: flex;
flex-flow: row wrap;
li {
width: auto;
display: inline-block;
height: 56px;
padding: 0 36px;
border-radius: 28px;
margin: 20px 32px 0 0;
border: 1.5px solid $color-n1-4;
color: $color-n2-5;
font-size: 28px;
line-height: 57px;
&.icon_on {
background: $color-faint-Black;
}
// &:nth-child(4n) {
// margin-right: 0;
// }
}
}
}
.search_content_list {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow-y: auto;
background: $color-white;
}
}
}
</style>
