when the time selector slides to select a date, it always triggers the sliding of the background of the main page, especially when it is pulled to the top or bottom. The background jitter of the main page is very serious. Baidu has tried a lot of information and tried several methods. This problem has not been solved. Which god who stepped on the pit can provide some ideas.
this is the core code of the time selector component:
<template>
<div>
<div class="picker_content">
<div class="picker_title">
<span class="title_cancel" @click="cancelChooseDate"></span>
<span class="title_text">{{data}}</span>
<span class="title_submit" @click="submitChooseDate"></span>
</div>
<div class="picker_body">
<div class="center_body"></div>
<div class="body_year" @scroll.prevent="scrollDate("year")">
<div class="year_body" v-for="(item, index) in yearData" :key="index">
<span class="year_text">{{item}}</span>
</div>
</div>
<div class="body_month" @scroll.prevent="scrollDate("month")">
<div class="month_body" v-for="(item, index) in monthData" :key="index">
<span class="month_text">{{item}}</span>
</div>
</div>
<div class="body_day" @scroll.prevent="scrollDate("day")">
<div class="day_body" v-for="(item, index) in dayData" :key="index">
<span class="day_text">{{item}}</span>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
data: {
type: String,
default: ""
},
theDate: {
type: String,
default: ""
}
},
data() {
return {
initData: ["1", "2", "3", "4", "5"],
yearData: ["", "", "2018", "2019", "2020", "2021", "2022", "", ""],
monthData: ["", "", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10" ,"11", "12", "", ""],
allDayData: ["", "", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "", ""],
dayData: [],
year: undefined,
month: undefined,
day: undefined,
temp: {
selectedMonth: undefined,
selectedDay: undefined,
beginOrEnd: undefined
}
}
},
created() {
this.dayData = this.allDayData
},
watch: {
theDate: "initDate"
},
methods: {
initDate() {
let _date = new Date()
let _year = _date.getFullYear() + ""
let _month = this.theDate.split("")[0] + ""
let _day = this.theDate.split("")[1]
//
for (const v of this.yearData) {
if (_year == v) {
document.getElementsByClassName("body_year")[0].scrollTop = (this.yearData.indexOf(v) - 2) * 42
document.getElementsByClassName("body_year")[0].children[this.yearData.indexOf(v)].children[0].classList.add("selected_style")
}
}
//
for (const v of this.monthData) {
if (_month == v) {
document.getElementsByClassName("body_month")[0].scrollTop = (this.monthData.indexOf(v) - 2) * 42
document.getElementsByClassName("body_month")[0].children[this.monthData.indexOf(v)].children[0].classList.add("selected_style")
}
}
//
for (const v of this.dayData) {
if (_day == v) {
document.getElementsByClassName("body_day")[0].scrollTop = (this.dayData.indexOf(v) - 2) * 42
document.getElementsByClassName("body_day")[0].children[this.dayData.indexOf(v)].children[0].classList.add("selected_style")
}
}
},
scrollDate(data) {
let _yearArr = []
let _monthArr = []
let _dayArr = []
for (const v of document.getElementsByClassName("body_year")[0].children) {
_yearArr.push(v)
}
for (const v of document.getElementsByClassName("body_month")[0].children) {
_monthArr.push(v)
}
for (const v of document.getElementsByClassName("body_day")[0].children) {
_dayArr.push(v)
}
if (data == "year") {
let a = document.getElementsByClassName("body_year")[0].scrollTop
let year = undefined
let month = undefined
//
for (const v of _monthArr) {
if (v.children[0].classList[1] == "selected_style") {
month = parseInt(v.children[0].innerText.slice(0, -1))
}
}
for (const v of _yearArr) {
if (((2 + parseInt(a/42)) == _yearArr.indexOf(v)) && (a%42 <= 21)) {
v.children[0].classList.add("selected_style")
//
year = parseInt(v.children[0].innerText.slice(0, -1))
//
if (month == "1" || month == "3" || month == "5" || month == "7" || month == "8" || month == "10" || month == "12") {
this.dayData = this.allDayData
}
if (month == "4" || month == "6" || month == "9" || month == "11") {
this.dayData = this.allDayData.slice(0, -3)
this.dayData.push("")
this.dayData.push("")
}
//
if (month == "2" && year%4 == 0) {
this.dayData = this.allDayData.slice(0, -4)
this.dayData.push("")
this.dayData.push("")
}
if (month == "2" && year%4 != 0) {
this.dayData = this.allDayData.slice(0, -5)
this.dayData.push("")
this.dayData.push("")
}
} else {
v.children[0].classList.remove("selected_style")
}
}
}
if (data == "month") {
let a = document.getElementsByClassName("body_month")[0].scrollTop
let year = undefined
//
for (const v of _yearArr) {
if (v.children[0].classList[1] == "selected_style") {
year = parseInt(v.children[0].innerText.slice(0, -1))
}
for (const v of _monthArr) {
if (((2 + parseInt(a/42)) == _monthArr.indexOf(v)) && (a%42 <= 21)) {
v.children[0].classList.add("selected_style")
//
let month = parseInt(v.children[0].innerText.slice(0, -1))
//
if (month == "1" || month == "3" || month == "5" || month == "7" || month == "8" || month == "10" || month == "12") {
this.dayData = this.allDayData
}
if (month == "4" || month == "6" || month == "9" || month == "11") {
this.dayData = this.allDayData.slice(0, -3)
this.dayData.push("")
this.dayData.push("")
}
//
if (month == "2" && year%4 == 0) {
this.dayData = this.allDayData.slice(0, -4)
this.dayData.push("")
this.dayData.push("")
}
if (month == "2" && year%4 != 0) {
this.dayData = this.allDayData.slice(0, -5)
this.dayData.push("")
this.dayData.push("")
}
} else {
v.children[0].classList.remove("selected_style")
}
}
}
}
if (data == "day") {
let a = document.getElementsByClassName("body_day")[0].scrollTop
for (const v of _dayArr) {
if (((2 + parseInt(a/42)) == _dayArr.indexOf(v)) && (a%42 <= 21)) {
v.children[0].classList.add("selected_style")
} else {
v.children[0].classList.remove("selected_style")
}
}
}
},
cancelChooseDate() {
this.$emit("closeTimePicker", false)
},
submitChooseDate() {
let _monthArr = []
let _dayArr = []
for (const v of document.getElementsByClassName("body_month")[0].children) {
_monthArr.push(v)
}
for (const v of document.getElementsByClassName("body_day")[0].children) {
_dayArr.push(v)
}
for (const v of _monthArr) {
if (v.children[0].classList[1] == "selected_style") {
this.temp.selectedMonth = v.children[0].innerText
}
}
for (const v of _dayArr) {
if (v.children[0].classList[1] == "selected_style") {
this.temp.selectedDay = v.children[0].innerText
}
}
this.temp.beginOrEnd = this.data
this.$emit("chooseDate", this.temp)
}
}
}
</script>this is the code for the front page:
<template>
<div class="container">
<div class="bgColor" style="height:100%;width:100%;background-color: -sharpf5f5f5;">
<Swiper v-if="list.length > 0" :autoPlay="true" :showIndicator="true" interval="2500" duration="500">
<Slide v-for="(item,index) in list" :key="index">
<img class="img" :src=item.src>
</Slide>
</Swiper>
<div class="body_top">
<div class="freedomCoach" @click="selectedFreedom">
<span class="freedomCoachText"></span>
</div>
<div class="myCoach" @click="selectedMy">
<span class="myCoachText"></span>
</div>
</div>
<div class="body_outside">
<div class="body">
<div class="body_left">
<img class="left_image" src="../assets/IndexDemo/weizhi@2x.png">
</div>
<div class="body_right">
<span class="right_city">{{nowCity}}</span>
<div class="right_location" @click="refresh">
<img class="right_location_image" src="../assets/IndexDemo/shape@2x.png">
<span class="right_location_text" id="myLocation"></span>
</div>
</div>
</div>
<div class="body">
<div class="body_left">
<img class="left_image" src="../assets/IndexDemo/booking_cat@2x.png">
</div>
<div class="body_right">
<div class="gear_project" v-for="(item1, index1) in gearData" :key="index1" @click="chooseGearType(index1)">
<div class="project_point"></div>
<span class="project_text">{{item1}}</span>
</div>
</div>
</div>
<div class="body">
<div class="body_left">
<img class="left_image" src="../assets/IndexDemo/shijian@2x.png">
</div>
<div class="body_right">
<div class="right_beginDate" @click="chooseBeginDate">
<span class="begin_text"></span>
<span class="begin_date">{{beginDate}}</span>
</div>
<img class="right_centerImg" src="../assets/IndexDemo/next@2x.png">
<div class="right_endDate" @click="chooseEndDate">
<span class="end_text"></span>
<span class="end_date">{{endDate}}</span>
</div>
</div>
</div>
<div class="body">
<div class="body_left">
<img class="left_image" src="../assets/IndexDemo/xiangmu@2x.png">
</div>
<div class="body_right">
<div class="right_project" v-for="(item, index) in indexData" :key="index" @click="chooseOnePrj(index)">
<div class="project_point"></div>
<span class="project_text">{{item}}</span>
</div>
</div>
</div>
<div class="body">
<div class="body_left">
<img class="left_image" src="../assets/IndexDemo/sousuo@2x.png">
</div>
<div class="body_right">
<input class="right_input" v-model="searchString" placeholder="">
</div>
</div>
<div class="body_appointment" @click="searchCoach">
<span class="appointment_text"></span>
</div>
</div>
<img class="adImage" src="../assets/IndexDemo/home_banner_03@2x.png" @click="toCoachesList">
<FooterItem></FooterItem>
</div>
<!-- -->
<time-picker :titleData="titleData" :theDate="theDate" :showSomething="showTimePicker" @returnData="returnData" @returnStatus="returnStatus"></time-picker>
<!-- -->
<toast :showSomething="showToast" :title="toastTitle" :width="toastWidth" :type="toastType" @changeShow="changeShow"></toast>
<!-- Loading -->
<loading :showSomething="showLoading"></loading>
</div>
</template>
<script>
import { Swiper, Slide } from "vue-swiper-component";
import FooterItem from "../components/Footer/Footer";
import TimePicker from "../components/TimePicker/Index";
import Toast from "../components/Toast/Index";
import constants from "../utils/constants";
import { isNullOrEmpty } from "../utils/validate";
import { getAdImage } from "../api/Index/index";
import Loading from "../components/Loading/Index";
export default {
data() {
return {
indexData: ["", "", ""],
showTimePicker: false,
titleData: undefined,
beginDate: "",
endDate: "",
theDate: "",
nowCity: "",
subjectType: undefined,
searchString: "",
showToast: undefined,
toastTitle: "",
toastWidth: "",
toastType: "",
showLoading: undefined,
list: [],
indexDetails: {},
address: "",
tempCity: "",
adcode: "",
gearData: ["C1", "C2"],
gearType: undefined
};
},
components: {
FooterItem,
TimePicker,
Toast,
Swiper,
Slide,
Loading
},
created() {
let vm = this;
let date = new Date();
let _beginDate = date.getFullYear();
let _endDate = date.getFullYear();
if (date.getMonth() + 1 < 10) {
_beginDate = _beginDate + "-" + "0" + (date.getMonth() + 1);
_endDate = _endDate + "-" + "0" + (date.getMonth() + 1);
} else {
_beginDate = _beginDate + "-" + (date.getMonth() + 1);
_endDate = _endDate + "-" + "0" + (date.getMonth() + 1);
}
if (date.getDate() < 10) {
_beginDate = _beginDate + "-" + "0" + date.getDate();
// _endDate = _endDate + "-" + "0" + date.getDate();//
_endDate = _endDate + "-" + "0" + (date.getDate() + 6); //
} else {
_beginDate = _beginDate + "-" + date.getDate();
// _endDate = _endDate + "-" + date.getDate();//
_endDate = _endDate + "-" + (date.getDate() + 6); //
}
window.localStorage.setItem(constants.startDate, _beginDate);
window.localStorage.setItem(constants.endDate, _endDate);
vm.beginDate = date.getMonth() + 1 + "" + date.getDate() + "";
// vm.endDate = date.getMonth() + 1 + "" + date.getDate() + "";//
// vm.endDate = date.getMonth() + 1 + "" + (date.getDate() + 6) + "";//
let dayTime = date.setDate(date.getDate() + 6); //+6
let d = new Date(dayTime);
let M =
(date.getMonth()[0] + 1 < 10
? "0" + (date.getMonth() + 1)
: date.getMonth() + 1) + "";
let D = date.getDate() + "";
vm.endDate = M + D;
var map, geolocation, searchcity, geocoder;
map = new AMap.Map("container", {
resizeEnable: true
});
//
map.plugin("AMap.CitySearch", function() {
searchcity = new AMap.CitySearch({
enableHighAccuracy: true //:true
});
map.addControl(searchcity);
searchcity.getLocalCity();
AMap.event.addListener(searchcity, "complete", onSearchComplete); //
});
function onSearchComplete(data) {
vm.nowCity = data.city;
}
//
map.plugin("AMap.Geolocation", function() {
geolocation = new AMap.Geolocation({
enableHighAccuracy: true, //:true
timeout: 10000 //10:
});
map.addControl(geolocation);
geolocation.getCurrentPosition();
AMap.event.addListener(geolocation, "complete", onComplete); //
});
function onComplete(data) {
data.position.getLat();
data.position.getLng();
let _lat = data.position.getLat();
let _lng = data.position.getLng();
window.localStorage.setItem(constants.latitude, _lat);
window.localStorage.setItem(constants.longitude, _lng);
//
map.plugin("AMap.Geocoder", function() {
//
//Geocoder
geocoder = new AMap.Geocoder({
city: "020" //:""
});
//
var lnglatXY = [data.position.getLng(), data.position.getLat()];
geocoder.getAddress(lnglatXY, function(status, result) {
if (status === "complete" && result.info === "OK") {
//:
result.regeocode.formattedAddress;
vm.adcode =
result.regeocode.addressComponent.adcode.slice(0, 4) + "00";
vm.nowCity = result.regeocode.addressComponent.city; //
vm.tempCity = result.regeocode.addressComponent.city;
vm.address =
result.regeocode.addressComponent.street +
result.regeocode.addressComponent.streetNumber; //
} else {
alert("");
}
});
});
}
// let _lat = "23.133267";
// let _lng = "113.368004";
// window.localStorage.setItem(constants.latitude, _lat);
// window.localStorage.setItem(constants.longitude, _lng);
//
vm.showLoading = true;
let _imgList = [];
getAdImage().then(response => {
const data = response.data;
vm.indexDetails = data.data;
for (const v of vm.indexDetails) {
let _tmp = {};
_tmp.src = v.imgUrl;
_imgList.push(_tmp);
}
for (const v of _imgList) {
vm.list.push(v);
}
vm.showLoading = false;
});
},
mounted() {
// document.getElementsByClassName("bgColor")[0].style.cssText =
// "position:absolute; left: 0; top: 0; width: 100%; height: " +
// window.screen.height +
// "px; z-index: -1; background-color: -sharpf5f5f5;";
// "position:absolute; left: 0; top: 0; width: 100%; height: 106%; z-index: -1;background-color: -sharpf5f5f5;"
document
.getElementsByClassName("freedomCoach")[0]
.classList.add("selectedStyle");
document
.getElementsByClassName("freedomCoachText")[0]
.classList.add("selectedTextStyle");
},
methods: {
chooseOnePrj(data) {
let _arr = [];
for (const v of document.getElementsByClassName("right_project")) {
_arr.push(v);
}
for (const v of _arr) {
if (data == _arr.indexOf(v)) {
v.children[0].classList.add("choose_point_style");
v.children[1].classList.add("choose_text_style");
if (v.children[1].innerText == "") {
this.subjectType = " ";
} else if (v.children[1].innerText == "") {
this.subjectType = "1";
} else {
this.subjectType = "2";
}
} else {
v.children[0].classList.remove("choose_point_style");
v.children[1].classList.remove("choose_text_style");
}
}
},
chooseGearType(data) {
let _arr = [];
for (const v of document.getElementsByClassName("gear_project")) {
_arr.push(v);
}
for (const v of _arr) {
if (data == _arr.indexOf(v)) {
v.children[0].classList.add("choose_point_style");
v.children[1].classList.add("choose_text_style");
if (v.children[1].innerText == "C1") {
this.gearType = "c1";
} else {
this.gearType = "c2";
}
} else {
v.children[0].classList.remove("choose_point_style");
v.children[1].classList.remove("choose_text_style");
}
}
},
chooseBeginDate() {
this.showTimePicker = true;
this.theDate = this.beginDate;
this.titleData = "";
},
chooseEndDate() {
this.showTimePicker = true;
this.theDate = this.endDate;
this.titleData = "";
},
returnData(data) {
this.showTimePicker = data.show;
let _date = new Date();
if (data.text == "") {
this.beginDate = data.date;
let _beginDate = _date.getFullYear();
if (this.beginDate.split("")[0] < 10) {
_beginDate = _beginDate + "-" + "0" + this.beginDate.split("")[0];
} else {
_beginDate = _beginDate + "-" + this.beginDate.split("")[0];
}
if (this.beginDate.split("")[1].split("")[0] < 10) {
_beginDate =
_beginDate +
"-" +
"0" +
this.beginDate.split("")[1].split("")[0];
} else {
_beginDate =
_beginDate + "-" + this.beginDate.split("")[1].split("")[0];
}
window.localStorage.setItem(constants.startDate, _beginDate);
}
if (data.text == "") {
this.endDate = data.date;
let _endDate = _date.getFullYear();
if (this.endDate.split("")[0] < 10) {
_endDate = _endDate + "-" + "0" + this.endDate.split("")[0];
} else {
_endDate = _endDate + "-" + this.endDate.split("")[0];
}
if (this.endDate.split("")[1].split("")[0] < 10) {
_endDate =
_endDate + "-" + "0" + this.endDate.split("")[1].split("")[0];
} else {
_endDate =
_endDate + "-" + this.endDate.split("")[1].split("")[0];
}
window.localStorage.setItem(constants.endDate, _endDate);
}
this.theDate = "";
},
returnStatus(data) {
this.showTimePicker = data;
this.theDate = "";
},
selectedFreedom() {
//
document
.getElementsByClassName("myCoach")[0]
.classList.remove("selectedStyle");
document
.getElementsByClassName("myCoachText")[0]
.classList.remove("selectedTextStyle");
//
document
.getElementsByClassName("freedomCoach")[0]
.classList.add("selectedStyle");
document
.getElementsByClassName("freedomCoachText")[0]
.classList.add("selectedTextStyle");
},
selectedMy() {
//
document
.getElementsByClassName("freedomCoach")[0]
.classList.remove("selectedStyle");
document
.getElementsByClassName("freedomCoachText")[0]
.classList.remove("selectedTextStyle");
//
document
.getElementsByClassName("myCoach")[0]
.classList.add("selectedStyle");
document
.getElementsByClassName("myCoachText")[0]
.classList.add("selectedTextStyle");
//
this.$router.push({
path: "/teamCoachesList"
});
},
computingTime(data1, data2) {
let data;
let days;
let date = new Date();
data1 =
date.getFullYear() +
"/" +
data1.split("")[0] +
"/" +
data1.split("")[1].split("")[0];
data2 =
date.getFullYear() +
"/" +
data2.split("")[0] +
"/" +
data2.split("")[1].split("")[0];
data1 = Date.parse(data1);
data2 = Date.parse(data2);
data = data2 - data1;
data = Math.abs(data);
days = Math.floor(data / (24 * 3600 * 1000));
if (days < 7) {
return true;
} else {
return false;
}
},
searchCoach() {
if (isNullOrEmpty(this.subjectType)) {
this.showToast = true;
this.toastTitle = "";
this.toastType = "text";
return;
}
if (!this.computingTime(this.endDate, this.beginDate)) {
this.showToast = true;
this.toastTitle = "";
this.toastType = "text";
this.toastWidth = "200px";
return;
}
if (isNullOrEmpty(this.gearType)) {
this.showToast = true;
this.toastTitle = "";
this.toastType = "text";
return;
}
window.localStorage.setItem(
constants.currentCity,
this.tempCity
// document.getElementsByClassName("right_city")[0].innerText
);
window.localStorage.setItem(constants.subjectTypeId, this.subjectType);
window.localStorage.setItem(constants.gearType, this.gearType);
// window.localStorage.setItem(constants.currentCityCode, "440100");
window.localStorage.setItem(constants.currentCityCode, this.adcode);
if (this.searchString) {
window.localStorage.setItem(constants.searchStr, this.searchString);
} else {
window.localStorage.setItem(constants.searchStr, " ");
}
setTimeout(() => {
this.$router.push({
path: "/coachesList"
});
}, 500);
},
changeShow(data) {
this.showToast = data;
this.toastTitle = "";
this.toastType = "";
this.toastWidth = "";
},
toCoachesList() {
this.subjectType = "2";
window.localStorage.setItem(constants.subjectTypeId, this.subjectType);
this.$router.push({
path: "/coachesList",
query: {
type: "peilian"
}
});
},
refresh() {
this.nowCity = this.address;
document.getElementById("myLocation").style.color = "-sharp0084ff";
}
}
};
</script>