feat： 修改样式

src/components/zj-container/zj-page-layout.vue

@@ -1,91 +1,85 @@
 <template>
-	<view
-		class="app-container"
-		:class="hasFooter || isTabbar ? '':'pb'"
-		:style="{background: bgColor, height: 'calc(100vh - ' + aHeight + 'px)'}">
-		<u-loading-page
-			loading-text="家盛茂工程师"
-			color="#333333"
-			fontSize="17"
-			image="/static/images/logo.png"
-			icon-size="44"
-			:loading="isLoading">
-		</u-loading-page>
+  <view class="app-container" :class="hasFooter || isTabbar ? '':'pb'"
+    :style="{background: bgColor, height: 'calc(100vh - ' + aHeight + 'px)'}">
+    <u-loading-page loading-text="家盛茂工程师" color="#333333" fontSize="17" image="/static/images/logo.png" icon-size="44"
+      :loading="isLoading">
+    </u-loading-page>
 
-		<block v-if="!isLoading">
-			<view class="header-container">
-				<slot name="header"></slot>
-			</view>
-			<view class="content-container">
-				<template v-if="isScroll">
-					<scroll-view
-						scroll-y
-						enable-flex
-						refresher-enabled
-						style="width: 100%; height: 100%; box-sizing: border-box;"
-						@scrolltoupper="(...p)=>{$emit('scrolltoupper',p)}"
-						@scrolltolower="(...p)=>{$emit('scrolltolower',p)}"
-						@scroll="(...p)=>{$emit('scroll',p)}"
-						@refresherpulling="(...p)=>{$emit('refresherpulling',p)}"
-						@refresherrefresh="(...p)=>{$emit('refresherrefresh',p)}"
-						@refresherrestore="(...p)=>{$emit('refresherrestore',p)}"
-						@refresherabort="(...p)=>{$emit('refresherabort',p)}"
-						:refresher-triggered="refresherTriggered">
-						<slot></slot>
-					</scroll-view>
-				</template>
-				<template v-else>
-					<view style="width: 100%; height: 100%; box-sizing: border-box; overflow-y: scroll;">
-						<slot></slot>
-					</view>
-				</template>
-			</view>
-			<view class="footer-container" v-if="hasFooter">
-				<slot name="footer"></slot>
-			</view>
-		</block>
-	</view>
+    <block v-if="!isLoading">
+      <view class="header-container">
+        <slot name="header"></slot>
+      </view>
+      <view class="content-container">
+        <template v-if="isScroll">
+          <scroll-view scroll-y enable-flex refresher-enabled style="width: 100%; height: 100%; box-sizing: border-box;"
+            :refresher-background="refresherBackground" @scrolltoupper="(...p)=>{$emit('scrolltoupper',p)}"
+            @scrolltolower="(...p)=>{$emit('scrolltolower',p)}" @scroll="(...p)=>{$emit('scroll',p)}"
+            @refresherpulling="(...p)=>{$emit('refresherpulling',p)}"
+            @refresherrefresh="(...p)=>{$emit('refresherrefresh',p)}"
+            @refresherrestore="(...p)=>{$emit('refresherrestore',p)}"
+            @refresherabort="(...p)=>{$emit('refresherabort',p)}" :refresher-triggered="refresherTriggered">
+            <slot></slot>
+          </scroll-view>
+        </template>
+        <template v-else>
+          <view style="width: 100%; height: 100%; box-sizing: border-box; overflow-y: scroll;">
+            <slot></slot>
+          </view>
+        </template>
+      </view>
+      <view class="footer-container" v-if="hasFooter">
+        <slot name="footer"></slot>
+      </view>
+    </block>
+  </view>
 </template>
 
 <script>
-  import { isWeixin } from "@/common/utils/common.js"
+  import {
+    isWeixin
+  } from "@/common/utils/common.js"
 
-	export default {
-		props: {
-			bgColor: {
-				type: String,
-				default: '#F3F4F8',
-			},
-			hasFooter: {
-				type: Boolean,
-				default: false,
-			},
-			isScroll: {
-				type: Boolean,
-				default: false,
-			},
-			refresherTriggered: {
-				type: Boolean,
-				default: false,
-			},
-			isLoading: {
-				type: Boolean,
-				default: false,
-			}
-		},
+  export default {
+    props: {
+      bgColor: {
+        type: String,
+        default: '#F3F4F8',
+      },
+      refresherBackground: {
+        type: String,
+        default: '#FFF',
+      },
+      hasFooter: {
+        type: Boolean,
+        default: false,
+      },
+      isScroll: {
+        type: Boolean,
+        default: false,
+      },
+      refresherTriggered: {
+        type: Boolean,
+        default: false,
+      },
+      isLoading: {
+        type: Boolean,
+        default: false,
+      }
+    },
 
-		computed: {
-			isTabbar() {
-				let pages = getCurrentPages();
-				if(pages.length > 0) {
-					let prevPage = pages[pages.length - 1];
-					if (prevPage.route === 'pages/index/index' || prevPage.route === 'pages/issue/index' || prevPage.route === 'pages/message/index' || prevPage.route === 'pages/mine/index') {
-						return true;
-					}else {
-						return false;
-					}
-				}
-			},
+    computed: {
+      isTabbar() {
+        let pages = getCurrentPages();
+        if (pages.length > 0) {
+          let prevPage = pages[pages.length - 1];
+          if (prevPage.route === 'pages/index/index' || prevPage.route === 'pages/issue/index' || prevPage.route ===
+            'pages/message/index' || prevPage.route === 'pages/mine/index') {
+            return true;
+          } else {
+            return false;
+          }
+        }
+      },
 
       aHeight() {
         let num = 0;
@@ -93,47 +87,52 @@
         if (isWeixin()) {
           num = 0;
         } else {
-          if(this.isTabbar) {
+          if (this.isTabbar) {
             num = 50;
-          }else {
+          } else {
             num = 44;
           }
         }
         // #endif
         return num;
       }
-		}
-	}
+    }
+  }
 </script>
 
 <style lang="scss" scoped>
-	::v-deep .u-loading-page {
-		z-index: 999999;
-	}
-	.app-container {
-		width: 100%;
+  ::v-deep .u-loading-page {
+    z-index: 999999;
+  }
+
+  .app-container {
+    width: 100%;
     height: 100vh;
-		box-sizing: border-box;
-		display: flex;
-		flex-direction: column;
-		&.pb {
-			padding-bottom: env(safe-area-inset-bottom);
-		}
-		.header-container {
-			flex-shrink: 0;
-		}
-		.content-container {
-			flex: 1;
-			height: 0;
-		}
-		.footer-container {
-			flex-shrink: 0;
-			padding-bottom: env(safe-area-inset-bottom);
-			background: #ffffff;
-			box-sizing: border-box;
-			box-shadow: $bottom-shadow;
-			position: relative;
-			z-index: 1;
-		}
-	}
-</style>
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+
+    &.pb {
+      padding-bottom: env(safe-area-inset-bottom);
+    }
+
+    .header-container {
+      flex-shrink: 0;
+    }
+
+    .content-container {
+      flex: 1;
+      height: 0;
+    }
+
+    .footer-container {
+      flex-shrink: 0;
+      padding-bottom: env(safe-area-inset-bottom);
+      background: #ffffff;
+      box-sizing: border-box;
+      box-shadow: $bottom-shadow;
+      position: relative;
+      z-index: 1;
+    }
+  }
+</style>

src/pages/index/index.vue

@@ -3,7 +3,8 @@
   <view>
     <view class="bg-container"></view>
     <zj-page-layout :hasFooter="false" :isScroll="true" :refresherTriggered="refresherTriggered"
-      @refresherrefresh="refresherrefresh" @scrolltolower="scrolltolower">
+      @refresherrefresh="refresherrefresh" @scrolltolower="scrolltolower"
+      refresherBackground="linear-gradient(to bottom, #01C30B, #f4f2f2)">
       <!-- <template slot="header">
         <view class="header-container" :style="cuStyle">二手空调</view>
       </template> -->
@@ -43,7 +44,8 @@
             <view class="title">{{item.title}}</view>
             <view class="des">{{item.content}}</view>
             <view class="imgs">
-              <image :src="imageUrl + it.imgUrl" v-for="(it, idx) in item.goodsFiles" :key="idx" mode="aspectFill"></image>
+              <image :src="imageUrl + it.imgUrl" v-for="(it, idx) in item.goodsFiles" :key="idx" mode="aspectFill">
+              </image>
             </view>
             <view class="bottom">
               <view class="left-location"><text class="iconfont icon-dingwei"></text>{{item.city}} {{item.area}}</view>
@@ -144,7 +146,7 @@
             pageSize: -1,
             state: true
           }).then(res => {
-            if(res.data && res.data.records) {
+            if (res.data && res.data.records) {
               this.bannerList = res.data.records.map(item => {
                 return this.imageUrl + item.imgSrc;
               });
@@ -158,23 +160,23 @@
       async getCategory() {
         return new Promise((resolve, reject) => {
           this.$api.get('/goods/category/list')
-          .then(res => {
-            this.categoryList = res.data || [];
-          }).finally(res => {
-            resolve(1);
-          })
+            .then(res => {
+              this.categoryList = res.data || [];
+            }).finally(res => {
+              resolve(1);
+            })
         })
       },
 
       //获取列表数据
       async getList() {
         let params = {};
-        if(this.tabCurrent === 1) {
+        if (this.tabCurrent === 1) {
           params.status = '1';
-        }else if(this.tabCurrent === 2) {
+        } else if (this.tabCurrent === 2) {
           params.lng = this.lng;
           params.lat = this.lat;
-        }else if(this.tabCurrent === 3) {
+        } else if (this.tabCurrent === 3) {
           params.visitOrderBy = 'YES';
         }
 
@@ -300,4 +302,4 @@
       }
     }
   }
-</style>
+</style>