完成聊天室滚动功能

App.vue

@@ -14,6 +14,8 @@
 			cleanPayTime: '',
 			pageSize: 5, // 列表加载的pageSize
 			isSetPassword: '',
+			times:'',
+			total_times:''
 		},
 		onLaunch: function() {
 			console.log('App Launch')
@@ -47,12 +49,13 @@
 					},
 					success: res => {
 						// 通过openid发起会员登录
-					     console.log(res.data.msg)
 						 getApp().globalData.user_id = res.data.msg.id;
 						 getApp().globalData.open_id = res.data.msg.openid;
 						 getApp().globalData.isAuth = res.data.msg.isauth === '0';
 						 getApp().globalData.user_name = res.data.msg.name;
 						 getApp().globalData.user_headUrl = res.data.msg.headimg;
+						 getApp().globalData.times = res.data.msg.times;
+						 getApp().globalData.total_times = res.data.msg.total_times;
 					} 
 				});
 			},

pages/index/index.vue

@@ -1,44 +1,45 @@
 <template>
-		<view class="content">
-			<navigation-custom :config="config" :scrollTop="scrollTop" @customConduct="customConduct" :scrollMaxHeight="scrollMaxHeight"/>
-			<view class='chat-box' :style="{ 'min-height': nowHeight}">
-				
-				<view class="tips-box">
-					{{nowTime}}
-				</view>
-				<view class="tips-box tips-title" >
-					您好，智能投顾很高兴为您服务！
+	<view class="content">
+		<navigation-custom :config="config" :scrollTop="scrollTopNav" @customConduct="customConduct" :scrollMaxHeight="scrollMaxHeight" />
+		<scroll-view id="scrollview" class='chat-box' :style="{height: style.contentViewHeight + 'px'}" scroll-y="true"
+		 :scroll-with-animation="true" :scroll-top="scrollTop">
+			<view class="tips-box">
+				{{nowTime}}
+			</view>
+			<view class="tips-box tips-title">
+				您好，智能投顾很高兴为您服务！
+			</view>
+
+			<view class="talk-box">
+				<view class="talk-head-box">
+					<image src="../../static/logo.png" mode="" class="talk-head"></image>
 				</view>
-				
-				<view class="talk-box" >
-					<view  class="talk-head-box">
-						<image src="../../static/logo.png" mode="" class="talk-head"></image>
+				<view class="talk-content">您好，智能顾投很高兴为您服务！</view>
+			</view>
+
+			<view v-for="chat in talkList" :key="chat.talkType"  class="m-item">
+				<view class="talk-box talk-box-end" v-show="chat.content">
+					<view class="talk-content">{{chat.content}}</view>
+					<view class="talk-head-box">
+						<image :src='userHeadUrl' mode="" class="talk-head"></image>
 					</view>
-					<view class="talk-content">您好，智能顾投很高兴为您服务！</view>
 				</view>
-				
-				<view  v-for="chat in talkList" :key="chat.talkType">
-					<view  class="talk-box talk-box-end" v-show="chat.content">
-						<view class="talk-content">{{chat.content}}</view>
-						<view  class="talk-head-box">
-							<image :src='userHeadUrl' mode="" class="talk-head"></image>
-						</view>
-					</view>
-					<view  class="talk-box">
-						<view  class="talk-head-box">
-							<image :src='rabotHeadImg' mode="" class="talk-head"></image>
-						</view>
-						<view class="talk-content">{{chat.reply}}</view>
+				<view class="talk-box">
+					<view class="talk-head-box">
+						<image :src='rabotHeadImg' mode="" class="talk-head"></image>
 					</view>
-				
+					<view class="talk-content">{{chat.reply}}</view>
 				</view>
-				
-			</view>
-			<view class="send-box">
-				<input type="number" class="enter-box" v-model="inputInfo">
-				<button type="primary" class="submit-message" @click="sendInputInfo()">发送</button>
+
 			</view>
+
+		</scroll-view>
+
+		<view class="send-box">
+			<input type="number" class="enter-box" v-model="inputInfo">
+			<button type="primary" class="submit-message" @click="sendInputInfo()">发送</button>
 		</view>
+	</view>
 </template>
 
 <script>
@@ -48,154 +49,149 @@
 		data() {
 			return {
 				title: 'RABOT',
-				nowTime:'',
-				nowHeight:'622px',
-				inputInfo:'',
-				rabotHeadImg:"../../static/logo.png",
-				userHeadUrl:getApp().globalData.user_headUrl || '../../static/alienware.png',
-				talkList:[
-					{
-						"id": "1", 
-						"content": "", 
-						"reply": "欢迎您使用阿拉灯神丁，您有10次免费查询机会，输入股票代码(例如：000001)试试吧！", 
-						"uid": "1", 
-						"type": "0", 
-						"addtime": "1575961303",
-					},
-					{
-						"id": "2", 
-						"reply": "参与投股100人，62人建议买入，30人建议卖出，8人建议持有不操作",
-						"uid": "1", 
-						"type": "0", 
-						"addtime": "1575961303",
-						 headUrl:'../../static/logo.png',
-						 content:'000001',
-					},
-					{
-						"id": "3", 
-						"reply": "停市啦!",
-						"uid": "1", 
-						"type": "0", 
-						"addtime": "1575961303",
-						 headUrl:'../../static/logo.png',
-						 content:'000003',
-					},
-					{
-						"id": "3", 
-						"reply": "停市啦!",
-						"uid": "1", 
-						"type": "0", 
-						"addtime": "1575961303",
-						 headUrl:'../../static/logo.png',
-						 content:'000003',
-					},
-					{
-						"id": "3", 
-						"reply": "停市啦!",
-						"uid": "1", 
-						"type": "0", 
-						"addtime": "1575961303",
-						 headUrl:'../../static/logo.png',
-						 content:'000003',
-					},{
-						"id": "3", 
-						"reply": "停市啦!",
-						"uid": "1", 
-						"type": "0", 
-						"addtime": "1575961303",
-						 headUrl:'../../static/logo.png',
-						 content:'000003',
-					},
-				],
-				config:{
-				      title:"阿拉丁神灯", //title
-				      bgcolor:"#fff", //背景颜色
-				      fontcolor:"black", //文字颜色，默认白色
-				      type:3, //type 1，3胶囊 2，4无胶囊模式
-				      transparent:false, //是否背景透明 默认白色
-				      linear:true, //是为开启下滑渐变
-				      share:true, //是否将主页按钮显示为分享按钮
-				      menuIcon:"../../static/icon/iconfont-user.png", //当type为3或者4的时候左边的icon文件位置，注意位置与当前页面不一样
-				       // menuText:"返回", 当type为3或4的时候icon右边的文字
-				         },
-				      scrollTop:0 ,// 当linear为true的时候需要通过onpagescroll传递参数
-				      scrollMaxHeight:200 //滑动的高度限制，超过这个高度即背景全部显示
+				nowTime: '',
+				nowHeight: '622px',
+				inputInfo: '',
+				rabotHeadImg: "../../static/logo.png",
+				userHeadUrl: getApp().globalData.user_headUrl || '../../static/alienware.png',
+				talkList: [],
+				config: {
+					title: "阿拉丁神灯", //title
+					bgcolor: "#fff", //背景颜色
+					fontcolor: "black", //文字颜色，默认白色
+					type: 3, //type 1，3胶囊 2，4无胶囊模式
+					transparent: false, //是否背景透明 默认白色
+					linear: true, //是为开启下滑渐变
+					share: true, //是否将主页按钮显示为分享按钮
+					menuIcon: "../../static/icon/iconfont-user.png", //当type为3或者4的时候左边的icon文件位置，注意位置与当前页面不一样
+					// menuText:"返回", 当type为3或4的时候icon右边的文字
+				},
+				scrollTopNav: 0, // 当linear为true的时候需要通过onpagescroll传递参数
+				scrollMaxHeight: 200 ,//滑动的高度限制，超过这个高度即背景全部显示
+				scrollTop:0,
+				style: {
+					pageHeight: 0,
+					contentViewHeight: 0,
+					footViewHeight: 90,
+					mitemHeight: 0
+				},
 			}
 		},
-		components:{
+		components: {
 			navigationCustom
 		},
 		onPageScroll(e) {
-			this.scrollTop = e.scrollTop;
+			this.scrollTopNav = e.scrollTop;
 		},
 		onLoad() {
-		  this.getEquipmentHeight();
-		  this.getHistory();
+			this.getEquipmentHeight();
+			setTimeout(()=>{
+		     this.getHistory();	
+		    },100)
 		},
 		onShow() {
 			this.getNowTime();
 		},
 		methods: {
-			getNowTime(){
+			getNowTime() {
 				let time = new Date();
-				let y=time.getFullYear();
-				let m=time.getMonth()+1;
-				let d=time.getDate();
-				let h=time.getHours();
-				let i=time.getMinutes();
-				i = i > 10 ? i : '0' + i;  
-				this.nowTime = y+"年"+m+"月"+d+"日"+"   "+h+":"+i
+				let y = time.getFullYear();
+				let m = time.getMonth() + 1;
+				let d = time.getDate();
+				let h = time.getHours();
+				let i = time.getMinutes();
+				i = i > 10 ? i : '0' + i;
+				this.nowTime = y + "年" + m + "月" + d + "日" + "   " + h + ":" + i
 			},
 			getEquipmentHeight() {
-				let height = uni.getSystemInfoSync().windowHeight;
-				this.nowHeight = height  + 'px';
+				const height = uni.getSystemInfoSync().windowHeight;
+				this.nowHeight = height + 'px';
 				getApp().globalData.glbalHeight = this.nowHeight;
+				this.style.pageHeight = height;
+				this.style.contentViewHeight = height - uni.getSystemInfoSync().screenWidth / 750 * (100) - 70; //像素   因为给出的是像素高度 然后我们用的是upx  所以换算一下 
+			   
 			},
-			getHistory(){
+			scrollToBottom() {
 				let that = this;
-				uni.request({
-					url:getApp().globalData.shareUrl, //需要设置为全局
-					method: 'POST',
-					header: {
-						'content-type': 'application/x-www-form-urlencoded'
-					},
-					data: {
-						method: 'question_list',
-						timestamp: getApp().globalData.globalTimestamp, //Date.now()
-						uid:getApp().globalData.user_id,
-						sign: md5('question_list' + getApp().globalData.globalTimestamp),
-						page:1,
-						pageSize:10,
+				let query = uni.createSelectorQuery();
+				query.selectAll('.m-item').boundingClientRect();
+				query.select('#scrollview').boundingClientRect();
+				query.exec((res) => {
+							that.style.mitemHeight = 0;
+							res[0].forEach((rect) => that.style.mitemHeight = that.style.mitemHeight + rect.height + 40) //获取所有内部子元素的高度
+							// 因为vue的虚拟DOM 每次生成的新消息都是之前的，所以采用异步setTimeout    主要就是添加了这红字
+							that.scrollTop = that.style.mitemHeight - that.style.contentViewHeight
+							// setTimeout(() => {
+							// 	if (that.style.mitemHeight > (that.style.contentViewHeight - 100)) { //判断子元素高度是否大于显示高度
+							// 		that.scrollTop = that.style.mitemHeight - that.style.contentViewHeight //用子元素的高度减去显示的高度就获益获得序言滚动的高度
+							// 	}
+							// }, 100)
+						})
 					},
-					success: res => {
-						 that.talkList = (res.data.msg).reverse();
-						 that.userHeadUrl = getApp().globalData.user_headUrl 
-					} 
-				});
-			},
-			customConduct(){
-					uni.navigateTo({
-						url:'../selfInfo/selfInfo'
-					})
-				},
-			sendInputInfo(){
-					if(!this.inputInfo){
-						uni.showToast({
-							title: '请输入股票代码',
-							icon: 'none'
+			getHistory() {
+						let that = this;
+						uni.request({
+							url: getApp().globalData.shareUrl, //需要设置为全局
+							method: 'POST',
+							header: {
+								'content-type': 'application/x-www-form-urlencoded'
+							},
+							data: {
+								method: 'question_list',
+								timestamp: getApp().globalData.globalTimestamp, //Date.now()
+								uid: getApp().globalData.user_id || '1',
+								sign: md5('question_list' + getApp().globalData.globalTimestamp),
+								page: 1,
+								pageSize: 10,
+							},
+							success: res => {
+								that.talkList = (res.data.msg).reverse();
+								that.userHeadUrl = getApp().globalData.user_headUrl;
+								setTimeout(()=>{
+									that.scrollToBottom()	
+								},100)
+								
+							}
 						});
-					}else {
-						let obj = {
-								talkType:1 ,// 代表用户
-								headUrl:'../../static/alienware.png',
-								content:this.inputInfo,
+					},
+			customConduct() {
+						uni.navigateTo({
+							url: '../selfInfo/selfInfo'
+						})
+					},
+					sendMsgRequest(msg) {
+						let that = this;
+						uni.request({
+							url: getApp().globalData.shareUrl, //需要设置为全局
+							method: 'POST',
+							header: {
+								'content-type': 'application/x-www-form-urlencoded'
+							},
+							data: {
+								method: 'question',
+								timestamp: getApp().globalData.globalTimestamp, //Date.now()
+								uid: getApp().globalData.user_id,
+								sign: md5('question' + getApp().globalData.globalTimestamp),
+								content: msg
+							},
+							success: res => {
+								this.inputInfo = '';
+								that.getHistory()
 							}
-						this.talkList.push(obj);
-						this.inputInfo = '';	
+						});
+					},
+			sendInputInfo() {
+						if (!this.inputInfo) {
+							uni.showToast({
+								title: '请输入股票代码',
+								icon: 'none'
+							});
+						} else {
+							this.sendMsgRequest(this.inputInfo)
+						}
 					}
-				}
 			},
-	}
+		}
 </script>
 
 <style>
@@ -203,13 +199,14 @@
 		text-align: center;
 	}
 
-    .chat-box {
+	.chat-box {
 		background: #f4f5f7;
 		padding-top: 3%;
-		padding-bottom:100upx;
+		padding-bottom: 100upx;
 	}
-    .tips-box {
-		background:#D5D5DA;
+
+	.tips-box {
+		background: #D5D5DA;
 		font-size: 28upx;
 		color: #fff;
 		border-radius: 30upx;
@@ -218,14 +215,16 @@
 		height: 50rpx;
 		line-height: 50rpx
 	}
-	.tips-title{
+
+	.tips-title {
 		width: 70%;
 		margin-top: 5%;
 		font-size: 30rpx;
 		height: 70rpx;
 		line-height: 70rpx
 	}
-    .send-box {
+
+	.send-box {
 		width: 100%;
 		height: 90rpx;
 		position: fixed;
@@ -234,41 +233,45 @@
 		display: flex;
 		align-items: center;
 	}
-	
+
 	.talk-box {
 		display: flex;
 		justify-content: flex-start;
 		align-items: center;
 		margin-top: 3%;
 	}
-	.talk-box-end{
+
+	.talk-box-end {
 		justify-content: flex-end;
 	}
+
 	.talk-head-box {
 		width: 80rpx;
-		height:80rpx;
+		height: 80rpx;
 		border-radius: 30rpx;
 		margin-left: 2%;
-        margin-right: 2%; 
+		margin-right: 2%;
 	}
-	
+
 	.talk-head {
 		width: 100%;
 		height: 100%;
 		border-radius: 50%;
 	}
+
 	.talk-content {
 		padding: 2%;
 		background: #fff;
-	/* 	height:50rpx;
+		/* 	height:50rpx;
 		line-height: 50rpx; */
 		font-size: 28rpx;
 		border-top-right-radius: 20rpx;
 		border-bottom-left-radius: 20rpx;
-		border-bottom-right-radius:20rpx;
+		border-bottom-right-radius: 20rpx;
 		text-align: left;
 		max-width: 70%;
 	}
+
 	.enter-box {
 		width: 78%;
 		height: 70rpx;
@@ -277,15 +280,16 @@
 		border-radius: 1%;
 		text-align: left;
 	}
+
 	.submit-message {
 		width: 18%;
 		height: 70rpx;
 		font-size: 28rpx;
 		line-height: 70rpx;
 		color: #fff;
-		background-color: #0A98D5!important;
+		background-color: #0A98D5 !important;
 	}
-	
+
 	.logo {
 		height: 200upx;
 		width: 200upx;