添加悬浮组件 更改页面布局

components/drag-button/drag-button.vue

@@ -0,0 +1,143 @@
+<template>
+	<view>
+		<view
+			id="_drag_button"
+			class="drag"
+			:style="'left: ' + left + 'px; top:' + top + 'px;'"
+			@touchstart="touchstart"
+			@touchmove.stop.prevent="touchmove"
+			@touchend="touchend"
+			@click.stop.prevent="click"
+			:class="{transition: isDock && !isMove }"
+		>
+		
+			<text>{{ text }}</text>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'drag-button',
+		props: {
+			isDock:{
+				type: Boolean,
+				default: false
+			},
+			existTabBar:{
+				type: Boolean,
+				default: false
+			}
+		},
+		data() {
+			return {
+				top:0,
+				left:0,
+				width: 0,
+				height: 0,
+				offsetWidth: 0,
+				offsetHeight: 0,
+				windowWidth: 0,
+				windowHeight: 0,
+				isMove: true,
+				edge: 10,
+				text: '个人中心'
+			}
+		},
+		mounted() {
+			const sys = uni.getSystemInfoSync();
+			
+			this.windowWidth = sys.windowWidth;
+			this.windowHeight = sys.windowHeight;
+			
+			// #ifdef APP-PLUS
+				this.existTabBar && (this.windowHeight -= 50);
+			// #endif
+			if (sys.windowTop) {
+				this.windowHeight += sys.windowTop;
+			}
+			console.log(sys)
+			
+			const query = uni.createSelectorQuery().in(this);
+			query.select('#_drag_button').boundingClientRect(data => {
+				this.width = data.width;
+				this.height = data.height;
+				this.offsetWidth = data.width / 2;
+				this.offsetHeight = data.height / 2;
+				this.left = this.windowWidth - this.width - this.edge;
+				this.top = this.windowHeight - this.height - this.edge;
+			}).exec();
+		},
+		methods: {
+			click() {
+				this.$emit('btnClick');
+			},
+			touchstart(e) {
+				this.$emit('btnTouchstart');
+			},
+			touchmove(e) {
+				// 单指触摸
+				if (e.touches.length !== 1) {
+					return false;
+				}
+				
+				this.isMove = true;
+				
+				this.left = e.touches[0].clientX - this.offsetWidth;
+				
+				let clientY = e.touches[0].clientY - this.offsetHeight;
+				// #ifdef H5
+					clientY += this.height;
+				// #endif
+				let edgeBottom = this.windowHeight - this.height - this.edge;
+
+				// 上下触及边界
+				if (clientY < this.edge) {
+					this.top = this.edge;
+				} else if (clientY > edgeBottom) {
+					this.top = edgeBottom;
+				} else {
+					this.top = clientY
+				}
+				
+			},
+			touchend(e) {
+				if (this.isDock) {
+					let edgeRigth = this.windowWidth - this.width - this.edge;
+					
+					if (this.left < this.windowWidth / 2 - this.offsetWidth) {
+						this.left = this.edge;
+					} else {
+						this.left = edgeRigth;
+					}
+					
+				}
+				
+				this.isMove = false;
+				
+				this.$emit('btnTouchend');
+			},
+		}}
+</script>
+
+<style lang="scss">
+	.drag {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		background-color: rgba(0, 0, 0, 0.5);
+		box-shadow: 0 0 6upx rgba(0, 0, 0, 0.4);
+		color: $uni-text-color-inverse;
+		width: 180upx;
+		height: 60upx;
+		border-radius: 5%;
+		font-size: $uni-font-size-sm;
+		position: fixed;
+		z-index: 999999;
+		
+		&.transition {
+			transition: left .3s ease,top .3s ease;
+		}
+	}
+	
+</style>

pages.json

@@ -3,13 +3,12 @@
 		{
 			"path": "pages/index/index",
 			"style": {
-					"navigationBarTitleText": "阿拉丁神灯",
-					"navigationStyle":"custom"
-						}
+					"navigationBarTitleText": "阿拉丁神灯"
+					}
 		}
 	    ,{
             "path" : "pages/chat/chat",
-            "style" : {}
+            "style" : {} 
         }
         ,{
             "path" : "pages/chat/chatDetail/chatDetail",
@@ -18,7 +17,7 @@
 		,{
 		    "path" : "pages/selfInfo/selfInfo",
 		    "style" : {
-				"navigationBarTitleText": "我的"
+				"navigationBarTitleText": "个人中心"
 			}
 		}
         ,{

pages/index/index.vue

@@ -1,6 +1,6 @@
 <template>
 	<view class="content">
-		<navigation-custom :config="config" :scrollTop="scrollTopNav" @customConduct="customConduct" :scrollMaxHeight="scrollMaxHeight" />
+		<!-- <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="false" :scroll-top="scrollTop" @scrolltoupper="lower()">
 			<view class="tips-box">
@@ -35,14 +35,17 @@
 
 		</scroll-view>
 		<view class="send-box" :style="{ 'padding-bottom' : isShowKeyBoard + 'px'}">
-			<input type="text" class="enter-box" v-model="inputInfo" adjust-position='{{true}}' >
+			<input type="text" class="enter-box" v-model="inputInfo" :adjust-position="true"
+		   @focus="getInputFocus" @blur="getInputBlur" />
 			<button type="primary" class="submit-message" @click="sendInputInfo()">发送</button>
 		</view>
+		 <drag-button :isDock="true" :existTabBar="true"  @btnClick="goUserSelf" />
 	</view>
 </template>
 
 <script>
-	import navigationCustom from "../../components/struggler-navigationCustom/navigation-custom";
+	// import navigationCustom from "../../components/struggler-navigationCustom/navigation-custom";
+	import dragButton from "../../components/drag-button/drag-button.vue";
 	var md5 = require("../../common/md5.js");
 	var page = 1;
 	export default {
@@ -81,7 +84,8 @@
 			}
 		},
 		components: {
-			navigationCustom
+			//navigationCustom
+			dragButton
 		},
 		onPageScroll(e) {
 			this.scrollTopNav = e.scrollTop;
@@ -144,7 +148,7 @@
 				this.nowHeight = height + 'px';
 				getApp().globalData.glbalHeight = this.nowHeight;
 				this.style.pageHeight = height;
-				this.style.contentViewHeight = height - uni.getSystemInfoSync().screenWidth / 750 * (100) - 70; //像素   因为给出的是像素高度 然后我们用的是upx  所以换算一下 
+				this.style.contentViewHeight = height - uni.getSystemInfoSync().screenWidth / 750 * (100); //像素   因为给出的是像素高度 然后我们用的是upx  所以换算一下 
 			},
 			scrollToBottom() {
 				let that = this;
@@ -200,7 +204,7 @@
 							}
 						});
 					},
-			customConduct() {
+			goUserSelf() {
 						uni.navigateTo({
 							url: '../selfInfo/selfInfo'
 						})
@@ -249,12 +253,12 @@
 					console.log('noData')
 				}
 			},		
-			// getInputFocus(e){
-			// 	this.isShowKeyBoard = e.detail.height
-			// },
-			// getInputBlur(){
-			// 	this.isShowKeyBoard = 0
-			// },
+			getInputFocus(e){
+				//this.isShowKeyBoard = e.detail.height
+			},
+			getInputBlur(){
+				//this.isShowKeyBoard = 0
+			},
 			},
 		}
 </script>
@@ -267,7 +271,7 @@
 	.chat-box {
 		background: #f4f5f7;
 		padding-top: 3%;
-		padding-bottom: 100upx;
+		/* padding-bottom: 100upx; */
 	}
 
 	.tips-box {
@@ -373,4 +377,27 @@
 		font-size: 36upx;
 		color: #8f8f94;
 	}
+	
+	.uniFab{
+		width:98px;
+		height:36px;
+		background:rgba(231,247,236,1);
+		box-shadow:-6px 5px 74px 0px rgba(60,188,99,0.08);
+		border-radius:100px 0px 0px 100px;
+		right: 0upx;
+		position: fixed;
+		z-index: 9999;
+		top: 50%;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+	.uniFab text{
+		width:64px;
+		font-size:16px;
+		font-family:PingFangSC;
+		font-weight:600;
+		color:rgba(60,188,99,1);
+		text-shadow:0px 1px 2px rgba(12,39,20,0.2);
+	}
 </style>