Bladeren bron

优化加载逻辑,避免同时请求过多接口

xiaohaizhao 1 jaar geleden
bovenliggende
commit
05b024c7b4
5 gewijzigde bestanden met toevoegingen van 53 en 31 verwijderingen
  1. 19 9
      pages/index/index.vue
  2. 1 0
      pages/index/modules/home.vue
  3. 15 11
      pages/index/modules/message.vue
  4. 12 10
      pages/index/modules/mine.vue
  5. 6 1
      pages/index/modules/my-map.vue

+ 19 - 9
pages/index/index.vue

@@ -1,28 +1,29 @@
 <template>
 	<view class="container">
 		<tab-control ref="tabControl" :active='opentabControl' />
-		<home v-show="PageCur == 'Home'" />
-		<my-map v-show="PageCur == 'Map'" />
-		<message v-show="PageCur == 'Message'" />
-		<mine v-show="PageCur == 'Mine'" />
-		<view class="cu-bar tabbar bg-white foot" style="z-index: 100000;" @click="opentabControl(false)">
+		<home ref="Home" v-show="PageCur == 'Home'" />
+		<my-map ref="Map" v-show="PageCur == 'Map'" />
+		<message ref="Message" v-show="PageCur == 'Message'" />
+		<mine ref="Mine" v-show="PageCur == 'Mine'" />
+		<view class="cu-bar tabbar bg-white foot" style="z-index: 100000;">
 			<!-- bg-black -->
-			<view @click="PageCur = 'Home'" :class="PageCur == 'Home' ? 'action pitch-on-color' : 'action text-gray'">
+			<view @click="changePage('Home')" :class="PageCur == 'Home' ? 'action pitch-on-color' : 'action text-gray'">
 				<view class="iconfont" :class="PageCur == 'Home' ? 'icon-shouye-xuanzhong' : 'icon-shouye-weixuanzhong'" />
 				首页
 			</view>
-			<view @click="PageCur = 'Map'" :class="PageCur == 'Map' ? 'action pitch-on-color' : 'action text-gray'">
+			<view @click="changePage('Map')" :class="PageCur == 'Map' ? 'action pitch-on-color' : 'action text-gray'">
 				<view class="iconfont" :class="PageCur == 'Map' ? 'icon-ditu-xuanzhong' : 'icon-ditu-weixuanzhong'" /> 地图
 			</view>
 			<view class="text-gray" @click.stop="opentabControl(true)">
 				<button class="cu-btn cuIcon-add shadow more" style="background-color:#0B3F7E;color: #fff;"></button>
 			</view>
-			<view @click="PageCur = 'Message'" :class="PageCur == 'Message' ? 'action pitch-on-color' : 'action text-gray'">
+			<view @click="changePage('Message')"
+				:class="PageCur == 'Message' ? 'action pitch-on-color' : 'action text-gray'">
 				<view class="iconfont" :class="PageCur == 'Message' ? 'icon-xiaoxi-xuanzhong' : 'icon-xiaoxi-weixuanzhong'">
 					<view class="cu-tag badge">99</view>
 				</view> 消息
 			</view>
-			<view @click="PageCur = 'Mine'" :class="PageCur == 'Mine' ? 'action pitch-on-color' : 'action text-gray'">
+			<view @click="changePage('Mine')" :class="PageCur == 'Mine' ? 'action pitch-on-color' : 'action text-gray'">
 				<view class="iconfont" :class="PageCur == 'Mine' ? 'icon-wode-xuanzhong' : 'icon-wode-weixuanzhong'" /> 我的
 			</view>
 		</view>
@@ -45,6 +46,15 @@ export default {
 	methods: {
 		opentabControl(active) {
 			if (this.$refs.tabControl.active !== active) this.$nextTick(() => this.$refs.tabControl.active = active);
+		},
+		changePage(page) {
+			this.PageCur = page;
+			this.opentabControl(false)
+			this.loadElement()
+		},
+		loadElement(forcedUpdating) {
+			let page = this.$refs[this.PageCur];
+			if (page.uninitialized || forcedUpdating) page.init();
 		}
 	}
 }

+ 1 - 0
pages/index/modules/home.vue

@@ -50,6 +50,7 @@ export default {
 	},
 	data() {
 		return {
+			uninitialized: false,
 			usePort: this.usePort,
 			sitename: "",
 			place: {},

+ 15 - 11
pages/index/modules/message.vue

@@ -5,16 +5,20 @@
 </template>
 
 <script>
-	export default {
-		name:'Message',
-		data() {
-			return {
-				
-			};
-		}
-	}
+export default {
+	name: 'Message',
+	data() {
+		return {
+			uninitialized: true,
+		};
+	},
+	methods: {
+		init(forcedUpdating = true) {
+			this.uninitialized = false;
+			console.log("加载消息")
+		},
+	},
+}
 </script>
 
-<style lang="scss">
-
-</style>
+<style lang="scss"></style>

+ 12 - 10
pages/index/modules/mine.vue

@@ -7,7 +7,7 @@
 					<navigator class="iconfont icon-wode-xuanzhong" url="#" @click.stop="openPopup" />
 				</view>
 				<navigator class="user" url="#" @click.stop="openPopup">
-					<image class="profile-photo" v-if="userMsg.attinfos[0].url" :src="userMsg.attinfos[0].url"
+					<image class="profile-photo" v-if="userMsg.attinfos.length" :src="userMsg.attinfos[0].url"
 						mode="aspectFill" />
 					<view v-else class="profile-photo">
 						<view class="substitution">
@@ -32,7 +32,6 @@
 				</navigator>
 			</view>
 		</cu-custom>
-
 		<view class="nav-box">
 			<navigator class="nav-item" url="#">
 				<text class="iconfont icon-wode-xuanzhong" />
@@ -56,7 +55,6 @@
 				<text class="iconfont icon-wode-xuanzhong" />
 			</navigator>
 		</view>
-
 		<u-button :customStyle="butStyle" @click="logOut()">退出登录</u-button>
 
 		<u-popup :show="showPopup" :customStyle="popupStyle" bgColor="#F7F7F7" :overlay="false" zIndex="9998" mode="left"
@@ -73,7 +71,7 @@
 						头像
 					</view>
 					<view class="content">
-						<image class="profile-photo" v-if="userMsg.attinfos[0].url" :src="userMsg.attinfos[0].url"
+						<image class="profile-photo" v-if="userMsg.attinfos.length" :src="userMsg.attinfos[0].url"
 							mode="aspectFill" />
 						<view v-else class="profile-photo">
 							<view class="substitution">
@@ -139,7 +137,8 @@
 				<view class="title">
 					修改{{ changeUser.title }}
 				</view>
-				<input class="input" v-model="changeUser.changeValue" type="text" :placeholder="changeUser.placeholder" />
+				<input :focus="changeUser.showModal" class="input" v-model="changeUser.changeValue" type="text"
+					:placeholder="changeUser.placeholder" />
 			</view>
 		</u-modal>
 	</view>
@@ -156,6 +155,7 @@ export default {
 	components: { upload },
 	data() {
 		return {
+			uninitialized: true,
 			posTop: this.tovw(this.StatusBar),
 			headHeight: this.tovw(this.CustomBar - this.StatusBar),
 			customBar: this.tovw(this.CustomBar - this.StatusBar),
@@ -189,10 +189,12 @@ export default {
 			}
 		};
 	},
-	created() {
-		this.getUserMsg()
-	},
 	methods: {
+		init(forcedUpdating = true) {
+			this.uninitialized = false;
+			this.getUserMsg()
+			console.log("加载我的")
+		},
 		/* 打开modal */
 		openModal(name, title, value, placeholder) {
 			this.changeUser = {
@@ -239,7 +241,7 @@ export default {
 				}
 			}).then(res => {
 				console.log("用户信息", res)
-				if (this.cutoff(res.msg, '修改成功')) return;
+				if (this.cutoff(res.msg)) return;
 				this.userMsg = res.data;
 			})
 		},
@@ -289,7 +291,7 @@ export default {
 				},
 			})
 		},
-	},
+	}
 }
 </script>
 

+ 6 - 1
pages/index/modules/my-map.vue

@@ -63,6 +63,7 @@ export default {
 	data() {
 		return {
 			//subkey: 'GUCBZ-FWJCQ-AOQ5J-BUCCC-V7MJV-2QBDD',微信小程序个性化样式KEY
+			uninitialized: true,
 			latitude: 30.746129,
 			longitude: 120.755486,
 			markers: [],
@@ -73,9 +74,13 @@ export default {
 	},
 	created() {
 		this.setLocation();
-		this.getList()
 	},
 	methods: {
+		init(forcedUpdating = true) {
+			this.uninitialized = false;
+			this.getList()
+			console.log("加载地图")
+		},
 		getList() {
 			this.$Http.basic({
 				"id": 20230711144102,