style: 移动端仪表板自适应屏幕

mobile/src/pages/tabBar/home/detail.nvue

@@ -21,13 +21,21 @@
 			</block>
 			
 		</uni-nav-bar>
-		 <view v-if="url">
+		
-                <web-view
+		<scroll-view 
-                :webview-styles="webViewStyles"
+		
-                style="height: 100vh;"
+		:scroll-top="scrollTop" 
-                >
+		scroll-y="true" 
-                </web-view>
+		class="scroll-Y" 
-            </view>
+		@scrolltoupper="upper" 
+		@scrolltolower="lower"
+		@scroll="scroll">
+			
+			<web-view v-if="url" :style="{height: viewHeight}" />
+
+		</scroll-view>
+		
+		
 		
 
        
@@ -73,16 +81,15 @@
 				title: '',
 				banner: {},
 				htmlNodes: [],
-                webViewStyles: {
+                
-                    
-                    progress: {
-                        color: '#FF3333'
-                    },
-                    height: '700px'
-                },
                 url: '',
                 hasStar: false,
-                refreshCount: 0
+                refreshCount: 0,
+				scrollTop: 0,
+				old: {
+					scrollTop: 0
+				},
+				viewHeight: null
 			}
 		},
 		onLoad(event) {
@@ -101,12 +108,12 @@
 			uni.setNavigationBarTitle({
 				title: this.banner.title
 			});
-			// this.getDetail();
             this.addRecent()
             uni.$emit('loadHomeIndex', {
                 index: 1
             })
             this.loadStarStatus()
+			this.caclViewHeight()
 
 
 		},
@@ -118,68 +125,10 @@
             uni.navigateBack()
             
         },
-		onShareAppMessage() {
+		
-			return {
+		
-				title: this.banner.title,
-				path: DETAIL_PAGE_PATH + '?detailDate=' + JSON.stringify(this.banner)
-			}
-		},
-		onNavigationBarButtonTap(event) {
-			const buttonIndex = event.index;
-			if (buttonIndex === 0) {
-				// 分享 H5 的页面
-				const shareProviders = [];
-				uni.getProvider({
-					service: 'share',
-					success: (result) => {
-						// 目前仅考虑分享到微信
-						if (result.provider && result.provider.length && ~result.provider.indexOf('weixin')) {
-							const channels = _handleShareChannels(result.provider);
-							uni.showActionSheet({
-								itemList: channels.map(channel => {
-									return channel.text;
-								}),
-								success: (result) => {
-									const tapIndex = result.tapIndex;
-									uni.share({
-										provider: 'weixin',
-										type: 0,
-										title: this.banner.title,
-										scene: tapIndex === 0 ? 'WXSceneSession' : 'WXSenceTimeline',
-										href: 'https://uniapp.dcloud.io/h5' + DETAIL_PAGE_PATH + '?detailDate=' + JSON.stringify(this.banner),
-										imageUrl: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/b6304f00-5168-11eb-bd01-97bc1429a9ff.png'
-									});
-								}
-							});
-						} else {
-							uni.showToast({
-								title: '未检测到可用的微信分享服务'
-							});
-						}
-					},
-					fail: (error) => {
-						uni.showToast({
-							title: '获取分享服务失败'
-						});
-					}
-				});
-			}
-		},
 		methods: {
-			getDetail() {
+			
-				uni.request({
-					url: 'https://unidemo.dcloud.net.cn/api/news/36kr/' + this.banner.post_id,
-					success: (data) => {
-						if (data.statusCode == 200) {
-							var htmlString = data.data.content.replace(/\\/g, "").replace(/<img/g, "<img style=\"display:none;\"");
-							//this.htmlNodes = htmlParser(htmlString);
-						}
-					},
-					fail: () => {
-						console.log('fail');
-					}
-				});
-			},
             addRecent() {
                 const item = {id: this.banner.id, title: this.banner.title, index: this.banner.index}
                 addRecent(item)
@@ -215,18 +164,32 @@
                 })
             },
             loadLinkUrl() {
+				
+				
                 this.url = process.env.VUE_APP_BASE_API + 'tempMobileLink/' + this.banner.id + "/" + getToken()
                 const url = this.url
+				/* uni.hideLoading() */
                 setTimeout(() => {
                     const iframe = document.getElementsByTagName("iframe")[0]
-                    
+                    // iframe.style.height = (ktxScreentHeight - ktxStatusHeight) + 'px'
                     iframe.src = url
-                    iframe.onload = e => {
+                    iframe.onload = e => {						
-                        uni.hideLoading()
+                        uni.hideLoading()						
                     }                                        
                 }, 1000);
 
             },
+			caclViewHeight() {
+				let systemInfo = uni.getSystemInfoSync()
+				let pxToRpxScale = 750 / systemInfo.windowWidth;
+				// 屏幕的高度
+				let ktxScreentHeight = systemInfo.screenHeight * pxToRpxScale
+				// 状态栏的高度
+				let ktxStatusHeight = systemInfo.statusBarHeight * pxToRpxScale
+				// 导航栏的高度
+				let navigationHeight = 44 * pxToRpxScale
+				this.viewHeight = (ktxScreentHeight - ktxStatusHeight) + 'px'
+			},
             back() {   
                 // #ifdef H5  
                 let canBack = true  
@@ -245,7 +208,27 @@
                 return
                 // #endif  
                 uni.navigateBack(1)  
-            }
+            },
+			upper: function(e) {
+				console.log(e)
+			},
+			lower: function(e) {
+				console.log(e)
+			},
+			scroll: function(e) {
+				console.log(e)
+				this.old.scrollTop = e.detail.scrollTop
+			},
+			goTop: function(e) {
+				this.scrollTop = this.old.scrollTop
+				this.$nextTick(() => {
+					this.scrollTop = 0
+				});
+				uni.showToast({
+					icon:"none",
+					title:"纵向滚动 scrollTop 值已被修改为 0"
+				})
+			}
 		}
 	}
 </script>