封装 f-view-bottom-fixed（底部按钮父view），上传插件市场

.gitignore

 node_modules/
 .project
 unpackage/
-.DS_Store
\ No newline at end of file
+.DS_Store
+.idea
\ No newline at end of file

common/common.scss

@@ -32,4 +32,16 @@
 	width: 100%;
 	justify-content: space-between;
 	margin-bottom: 20rpx;
+}
+
+.v-row-bottom-fixed {
+	z-index: 10000;
+	position: fixed;
+	left: 0;
+	bottom: 0;
+	width: 100%;
+	justify-content: space-between;
+	display: flex;
+	flex-direction: row;
+	background-color: white;
 }
\ No newline at end of file

common/ui.js

@@ -9,6 +9,7 @@ const navigationBarUI = {
 const scrollViewUI = {
 	height1: 0, //只有导航栏时，scroll-view 的高度
 	height2: 0, //有导航栏 和 底部 tabBar 时，scroll-view 的高度
+	height3: 0, //有导航栏 和 底部 按钮 时，scroll-view 的高度
 }
 
 const statusViewUI = {
@@ -42,13 +43,14 @@ const appUI = {
 function init() {
 	let systemInfo = uni.getSystemInfoSync()
 	// 导航栏高度固定为 44px，状态栏高度为 systemInfo.statusBarHeight
-	appUI.screenWidth = systemInfo.screenHeight
-	appUI.screenHeight = systemInfo.screenWidth
+	appUI.screenWidth = systemInfo.screenWidth
+	appUI.screenHeight = systemInfo.screenHeight
 	appUI.saftBottom = systemInfo.safeAreaInsets.bottom
 	statusBarUI.height = systemInfo.statusBarHeight
 	navigationBarUI.height = statusBarUI.height + 44
 	scrollViewUI.height1 = systemInfo.screenHeight - navigationBarUI.height - systemInfo.safeAreaInsets.bottom
 	scrollViewUI.height2 = systemInfo.screenHeight - navigationBarUI.height - 44 - systemInfo.safeAreaInsets.bottom
+	scrollViewUI.height3 = scrollViewUI.height2 - 5 // 5（px）是底部按钮存在的情况下，减去的5（px）是底部按钮的 padding-top 
 	statusViewUI.width = systemInfo.screenWidth
 	statusViewUI.height = systemInfo.screenHeight - navigationBarUI.height - 44 - systemInfo.safeAreaInsets.bottom
 }

pages/index/index.vue

 <template>
 	<view class="content" :style="[style]">
-		<f-status-view v-if="statusViewUI.isShowStatusView" :status="statusViewUI.status"
-			:style="statusViewStyle"
+		<f-status-view v-if="statusViewUI.isShowStatusView" :status="statusViewUI.status" :style="statusViewStyle"
 			@tap="onStatusViewClick"></f-status-view>
 
+		<f-view-bottom-fixed>
+			<f-button-01 style="flex: 0 0 50%;" clazz="style-02" text="存为模板" backgroundColor="#222222"></f-button-01>
+			<f-button-01 style="flex: 0 0 50%;" clazz="style-03" text="提交"></f-button-01>
+		</f-view-bottom-fixed>
+
 		<view class="v-row flex-row">
 			<f-button-01 style="flex: 0 0 50%;" clazz="style-02"></f-button-01>
 			<f-button-01 style="flex: 0 0 50%;" clazz="style-03"></f-button-01>
@@ -57,7 +61,7 @@
 			<f-title-01 title="租金交付方式" subTitle="(押二付二)"></f-title-01>
 			<f-multi-text-01 :ui="cMultiText01Ui" @click="onCMultiText01Click"></f-multi-text-01>
 		</view>
-		<f-status-view :status="statusViewUI.status" @tap="onStatusViewClick"></f-status-view>
+		<f-status-view :status="statusViewUI2.status" @tap="onStatusViewClick2"></f-status-view>
 	</view>
 </template>
 
@@ -82,6 +86,10 @@
 					isShowStatusView: true,
 					status: ui.statusViewUI.status.loading.value
 				},
+				statusViewUI2: {
+					isShowStatusView: true,
+					status: ui.statusViewUI.status.empty.value
+				},
 				uiAddBtn: {
 					style: {
 						marginRight: "32rpx",
@@ -162,7 +170,7 @@
 			},
 			styleInit() {
 				this.style = {
-					paddingBottom: ui.appUI.saftBottom + "px"
+					paddingBottom: (ui.appUI.saftBottom + 48 + 5) + "px"
 				}
 				let systemInfo = uni.getSystemInfoSync()
 				this.statusViewStyle = {
@@ -187,6 +195,14 @@
 					_this.statusViewUI.status = ui.statusViewUI.status.error.value
 				}, 300)
 			},
+			onStatusViewClick2() {
+				console.log("click");
+				this.statusViewUI2.status = ui.statusViewUI.status.loading.value
+				let _this = this;
+				setTimeout(() => {
+					_this.statusViewUI2.status = ui.statusViewUI.status.error.value
+				}, 300)
+			},
 			onCMultiText01Click() {
 				console.log("click");
 			}
@@ -205,5 +221,4 @@
 		align-items: center;
 		justify-content: center;
 	}
-
 </style>
\ No newline at end of file

uni_modules/f-view-bottom-fixed/changelog.md

+## 1.0.1（2024-05-31）
+1.0.1
+## 1.0.0（2024-05-31）
+1.0.0

uni_modules/f-view-bottom-fixed/components/f-view-bottom-fixed/f-view-bottom-fixed.vue

+<template>
+	<view class="v-row-bottom-fixed" :style="{'width': width, 'padding': padding}">
+		<slot></slot>
+	</view>
+</template>
+<script>
+	import ui from '@/common/ui.js'
+	export default {
+		name: "f-view-bottom-fixed",
+		data() {
+			return {
+				width: "",
+				padding: "",
+			}
+		},
+		created() {
+			this.width = ui.appUI.screenWidth + "px"
+			this.padding = `5px 0 ${ui.appUI.saftBottom+'px'} 0`
+		}
+	}
+</script>
+<style lang="scss" scoped>
+	.v-row-bottom-fixed {
+		z-index: 10000;
+		position: fixed;
+		left: 0;
+		bottom: 0;
+		width: 100%;
+		justify-content: space-between;
+		display: flex;
+		flex-direction: row;
+		background-color: white;
+	}
+</style>

uni_modules/f-view-bottom-fixed/package.json

+{
+  "id": "f-view-bottom-fixed",
+  "displayName": "f-view-bottom-fixed",
+  "version": "1.0.1",
+  "description": "底部按钮父view",
+  "keywords": [
+    "f-view-bottom-fixed"
+],
+  "repository": "http://git.guoguodz.com/tangfh/fashion-ui.git",
+  "engines": {
+    "HBuilderX": "^3.1.0"
+  },
+  "dcloudext": {
+    "type": "component-vue",
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "插件不采集任何数据",
+      "permissions": "无"
+    },
+    "npmurl": ""
+  },
+  "uni_modules": {
+    "dependencies": [],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y",
+        "alipay": "y"
+      },
+      "client": {
+        "Vue": {
+          "vue2": "y",
+          "vue3": "y"
+        },
+        "App": {
+          "app-vue": "u",
+          "app-nvue": "u",
+          "app-uvue": "u"
+        },
+        "H5-mobile": {
+          "Safari": "u",
+          "Android Browser": "u",
+          "微信浏览器(Android)": "u",
+          "QQ浏览器(Android)": "u"
+        },
+        "H5-pc": {
+          "Chrome": "u",
+          "IE": "u",
+          "Edge": "u",
+          "Firefox": "u",
+          "Safari": "u"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "u",
+          "百度": "u",
+          "字节跳动": "u",
+          "QQ": "u",
+          "钉钉": "u",
+          "快手": "u",
+          "飞书": "u",
+          "京东": "u"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        }
+      }
+    }
+  }
+}
\ No newline at end of file

uni_modules/f-view-bottom-fixed/readme.md

+# f-view-bottom-fixed
\ No newline at end of file