Merge pull request bailicangdu#6 from bailicangdu/master

loadmore
z-9527 · Jun 9, 2017 · b3b1e08 · b3b1e08
2 parents 6ae6095 + 6949be4
commit b3b1e08
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 11 deletions.
diff --git a/src/frames/conversation/groupchat.vue b/src/frames/conversation/groupchat.vue
@@ -9,8 +9,9 @@
 				</router-link>
 			</section>
 		</head-top>
-		<section class="coversation" ref="groupHeight" >
+		<section class="coversation" ref="groupHeight" @touchmove='loadMore'>
 			<section class="coversationlist">
+				<div class="underscore" v-if="underscore">————&nbsp;我是有底线的&nbsp;————</div>
 				<ul>
 					<!--  群聊-->
 					<li v-for="item in groupconversine" >
@@ -29,7 +30,6 @@
 						</div>
 					</li>
 				</ul>
-				<div class="underscore" v-if="underscore">————&nbsp;我是有底线的&nbsp;————</div>
 			</section>
 		</section>
 		<div class="load" v-if="loadStatus">
@@ -248,7 +248,6 @@
 			socket.on('chat', function (data) {
 				console.log(data);
 			});
-			window.addEventListener('scroll', this.loadMore);
 		},
 		components:{
 			headTop,
@@ -260,33 +259,45 @@
 		},
 		beforeDestroy(){
             clearTimeout(this.timer);
-            socket.removeAllListeners()
+            socket.removeAllListeners();
         },
 		methods:{
 			...mapActions([
                 'getUserInfo',
             ]),
             async groupList(offset){
             	const groupData = await fetch('/chat/history',{"offset":this.offset, "limit":20} )
-            	this.loadStatus=false;
             	for(let i=0; i<groupData.history.length; i++){
             		this.imgS='';
-            		this.imgS=Math.ceil(Math.random()*20);//随机图片
+            		this.imgS=Math.ceil(Math.random()*2);//随机图片
             		groupData.history[i].avatar=imgurl+this.imgS+'.jpg';
             	}
             	if(groupData.status == 200){
-            		this.groupconversine = [...this.groupconversine,...groupData.history]
+            		this.groupconversine = [...groupData.history, ...this.groupconversine]
             	}
             	if(groupData.history.length < 20){
             		this.underscore=true;
             	}
+        		this.$nextTick(() => {
+            		this.loadStatus=false;
+        			if (offset == 0) {
+            			window.scrollTo(0, this.$refs.groupHeight.offsetHeight - window.innerHeight)
+        			}else{
+        				const scrollPosition = this.$refs.groupHeight.offsetHeight - this.lastPageHeight;
+        				window.scrollTo(0,scrollPosition)
+        			}
+        			this.lastPageHeight = this.$refs.groupHeight.offsetHeight;
+        		})
             },
             loadMore(){
+            	if (this.loadStatus || this.underscore) {
+            		return
+            	}
             	this.scroll = document.body.scrollTop;
-            	if(this.scroll >= this.$refs.groupHeight.offsetHeight - window.innerHeight){
+            	if(this.scroll == 0){
+            		this.loadStatus=true;
             		this.offset+=20;
             		this.groupList(this.offset);
-            		this.loadStatus=true;
             	}
             },
 			whatInput(){

diff --git a/src/frames/dialogue/dialogue.vue b/src/frames/dialogue/dialogue.vue
@@ -147,8 +147,9 @@
 				"SAVE_MESSAGE","LOGIN_COVER"
 			]),
 			async initData(){
+				const user_id = localStorage.getItem('user_id')
 				try{
-					const res = await fetch('/user/info')
+					const res = await fetch('/user/info', {user_id})
 					if (res.status !== 200) {
 						this.LOGIN_COVER(true)
 					}
@@ -188,6 +189,7 @@
             		try{
 						const res = await fetch('/user/login', {username: this.inputaccounts})
 						if (res.status == 200) {
+							localStorage.setItem('user_id',res.user_info.id.toString())
 							this.LOGIN_COVER(false)
 						}
 					}catch(err){

diff --git a/src/router/router.js b/src/router/router.js
@@ -18,7 +18,6 @@ const collect = r => require.ensure([], () => r(require('../frames/me/collect/co
 const wallet = r => require.ensure([], () => r(require('../frames/me/wallet/wallet')), 'wallet')
 const cardbag = r => require.ensure([], () => r(require('../frames/me/cardbag/cardbag')), 'cardbag')
 
-
 const computer = r => require.ensure([], () => r(require('../frames/computer/computer')), 'computer')
 const transfer = r => require.ensure([], () => r(require('../frames/transfer/transfer')), 'transfer')
 const settings = r => require.ensure([], () => r(require('../frames/me/settings/settings')), 'settings')