3

package.json

@@ -38,6 +38,7 @@
     "@vue/cli-plugin-vuex": "~5.0.0",
     "@vue/cli-service": "~5.0.0",
     "autoprefixer": "^7.1.2",
+    "better-scroll": "^2.5.0",
     "js-audio-recorder": "^1.0.7",
     "postcss": "^8.4.18",
     "postcss-loader": "^7.0.1",

src/App.vue

@@ -13,10 +13,20 @@
 		margin: 0;
 		padding: 0;
 		font-size: 16px;
+		-webkit-touch-callout:none; /*系统默认菜单被禁用*/
+		-webkit-user-select:none; /*webkit浏览器*/
+		-khtml-user-select:none; /*早期浏览器*/
+		-moz-user-select:none;/*火狐*/
+		-ms-user-select:none; /*IE10*/
+		user-select:none;
+	}
+	input {
+		-webkit-user-select:auto; /*webkit浏览器*/
 	}
 	html,body,#app{
 		width:100vw;
 		height:100vh;
+		overflow: auto;
 	}
 	
 </style>

src/views/friends/friends.vue

@@ -16,7 +16,7 @@
 			<img :src="`${assetsUrl}friends-circle.png`" class="nav-item-bg" :style="{'left':`${navIndex*78+16}px`}" />
 		</div>
 		
-		<van-swipe :show-indicators="showIndiacators" class="outer-swiper" ref="outerswiper" @change="outerSwiperChange" :style="{'height':`${scrollHeight}px`}">
+		<van-swipe :show-indicators="showIndiacators" class="outer-swiper" ref="outerswiper" @change="outerSwiperChange" style="height:calc( 100vh - 60px)">
 			<van-swipe-item class="outer-swiper-item">
 				<van-pull-refresh v-model="recommendRefreshing" @refresh="recommendRefresh" class="refresh"  :disabled="!recommendIsTop">
 					<div ref="recommendList" class="list" @scroll.passive="recommendScroll">
@@ -674,7 +674,6 @@
 											
 										
 									}
-									this.scrollHeight=window.screen.height-this.$store.state.tabbarHeight-this.$refs.topnav.offsetHeight;
 									this.recommendRefreshing=false;
 									this.$toast.clear();
 									this.$forceUpdate();
@@ -725,7 +724,6 @@
 									else{
 										this.nearList=res.data.users;
 									}
-									this.scrollHeight=window.screen.height-this.$store.state.tabbarHeight-this.$refs.topnav.offsetHeight;
 									this.nearRefreshing=false;
 									this.$forceUpdate();
 								}

src/views/messages/messages.vue

@@ -26,59 +26,60 @@
 			</van-popover>
 			
 		</div>
-		<div class="scroll" :style="{'height':`${scrollHeight}px`}" >
+		<van-list class="scroll">
 				<!-- <div class="message-item flex-between">
-					<image :src="`${assetsUrl}message-system.png`" mode="aspectFill" class="left-img"></image>
-					<div class="right-info">
-						<div class="ri-top flex-between">
-							<div class="rit-title fw600 font32">
-								系统通知
+						<image :src="`${assetsUrl}message-system.png`" mode="aspectFill" class="left-img"></image>
+						<div class="right-info">
+							<div class="ri-top flex-between">
+								<div class="rit-title fw600 font32">
+									系统通知
+								</div>
+								<div class="rit-time font22 fw400">
+									2022-8-31 09:57:13
+								</div>
 							</div>
-							<div class="rit-time font22 fw400">
-								2022-8-31 09:57:13
+							<div class="ri-bottom flex-between">
+								<div class="rib-text font28 fw400">
+									heihei
+								</div>
+								<div class="rib-num font20 fw400">
+									99
+								</div>
 							</div>
 						</div>
-						<div class="ri-bottom flex-between">
-							<div class="rib-text font28 fw400">
-								heihei
-							</div>
-							<div class="rib-num font20 fw400">
-								99
-							</div>
+					</div> -->
+					<van-swipe-cell v-for="(item,index) in messagesList" :key="index"  :data-index="index">
+						<div class="message-item flex-between" >
+						  	<img :src="item.userProfile.avatar" class="left-img" :style="{'width':`${showDelIndex===index?'0px':'60px'}`}" @click="toTalk(item.userProfile.userID)"></img>
+						  	<div class="right-info" @click="toTalk(item.userProfile.userID)">
+						  		<div class="ri-top flex-between">
+						  			<div class="rit-title fw600 font24 el">
+						  				{{item.userProfile.nick}}
+						  			</div>
+						  			<div class="rit-time font20 fw400">
+						  				{{item.lastMessage.lastTimeStr}}
+						  			</div>
+						  		</div>
+						  		<div class="ri-bottom flex-between">
+						  			<div class="rib-text font24 fw400 el">
+						  				{{item.lastMessage.payload.text}}
+						  			</div>
+						  			<div class="rib-num font20 fw400" v-if="item.unreadCount!==0">
+						  				{{item.unreadCount}}
+						  			</div>
+						  		</div>
+						  	</div>
 						</div>
-					</div>
-				</div> -->
-				<van-swipe-cell v-for="(item,index) in messagesList" :key="index"  :data-index="index">
-					<div class="message-item flex-between" >
-					  	<img :src="item.userProfile.avatar" class="left-img" :style="{'width':`${showDelIndex===index?'0px':'60px'}`}" @click="toTalk(item.userProfile.userID)"></img>
-					  	<div class="right-info" @click="toTalk(item.userProfile.userID)">
-					  		<div class="ri-top flex-between">
-					  			<div class="rit-title fw600 font24 el">
-					  				{{item.userProfile.nick}}
-					  			</div>
-					  			<div class="rit-time font20 fw400">
-					  				{{item.lastMessage.lastTimeStr}}
-					  			</div>
-					  		</div>
-					  		<div class="ri-bottom flex-between">
-					  			<div class="rib-text font24 fw400 el">
-					  				{{item.lastMessage.payload.text}}
-					  			</div>
-					  			<div class="rib-num font20 fw400" v-if="item.unreadCount!==0">
-					  				{{item.unreadCount}}
-					  			</div>
-					  		</div>
-					  	</div>
-					</div>
-				  <template #right>
-					  <div class="del-box flex-center" style="height:100%;padding: 0px 4px;">
-					  	<van-button type="danger" color="#7232dd" size="small" @click="delConversation" text="删除" />
-					  </div>
-				  </template>
-				</van-swipe-cell>
-				
-			<!-- <div class="no-more font24 fw400" v-if="messagesList.length!==0&&messagesList.length>=recommendTotal">没有更多了</div> -->
-			<Status type="noMsg" text="暂无消息" v-if="showNoMsg"></Status>
+					  <template #right>
+						  <div class="del-box flex-center" style="height:100%;padding: 0px 4px;">
+						  	<van-button type="danger" color="#7232dd" size="small" @click="delConversation" text="删除" />
+						  </div>
+					  </template>
+					</van-swipe-cell>
+					
+				<!-- <div class="no-more font24 fw400" v-if="messagesList.length!==0&&messagesList.length>=recommendTotal">没有更多了</div> -->
+				<Status type="noMsg" text="暂无消息" v-if="showNoMsg"></Status>
+			</van-list>
 		</div>
 	</div>
 </template>
@@ -124,16 +125,10 @@
 				showPayPopup:false,
 				showVipPopup:false,
 				showPopover:false,
-				actions: [{ text: '全部已读' }, { text: '清空消息' }],
+				actions: [{ text: '全部已读' }, { text: '清空消息' }]
 			};
 		},
 		computed: {
-			statusBarHeight() {
-				return this.$store.state.statusBarHeight;
-			},
-			topbarOffsetHeight() {
-				return this.$store.state.topbarOffsetHeight;
-			},
 			platform(){
 				return this.$store.state.platform;
 			},
@@ -145,7 +140,6 @@
 			this.$TUIKit.on(this.$TUIKitEvent.CONVERSATION_LIST_UPDATED, this.onConversationListUpdated);
 		},
 		mounted() {
-			
 			this.getUserMessages();
 			this.getSystemMessages();
 			
@@ -282,7 +276,6 @@
 					else{
 						this.showNoMsg=false;
 					}
-					this.scrollHeight=window.screen.height-this.$store.state.tabbarHeight-this.$refs.topnav.offsetHeight;
 				}).catch(err=>{
 					console.log(err)
 				})
@@ -383,7 +376,8 @@
 	}
 	.scroll{
 		padding-top: 60px;
-		overflow-y: auto;
+		padding-bottom: 60px;
+		background-color: $bgcolor1;
 		.message-item{
 			width: 100vw;
 			box-sizing: border-box;