引入uview组件库

App.vue

@@ -57,8 +57,8 @@ export default {
 <style>
 @import url("/components/gaoyia-parse/parse.css");
 </style>
-<style lang="scss" scoped>
-	// @import "@/uview-ui/index.scss";
+<style lang="scss" rel="stylesheet/scss">
+	@import "@/uview-ui/index.scss";
 	@import '@/common/styles/theme.css';
 	@import '@/common/styles/common.css';
 	@import '@/common/styles/main.css';

components/index-banner/index-banner.vue

@@ -104,6 +104,7 @@ export default {
 <!-- 复制之前的less放进来就可以 -->
 <style lang="less">
 	.index-banner{
+		height: 900rpx;
   //margin-bottom: 10px;
   .banner-title{
     padding: 10px 15px 10px 15px;
@@ -136,6 +137,7 @@ export default {
     background: #FFFFFF;
     image {
       width: 100%;
+	  height: 100%;
       object-fit: cover;
 
     }

components/lf-adModal/lf-adModal.vue

@@ -1,7 +1,14 @@
 <template>
 	<view class="content" v-if="value">
 		<view class="box">
-			<image class="img" src="https://picsum.photos/200" mode="aspectFill" @click="clickAd"></image>
+			<swiper class="swiper" :circular="true" 
+				indicator-active-color="#0091ff" 
+				:current="current" 
+				:indicator-dots="list.length > 1">
+				<swiper-item v-for="(item, index) in list" :key="index">
+					<image class="img" :src="item" mode="aspectFill" @click="clickAd"></image>
+				</swiper-item>
+			</swiper>
 			<view class="close" @click="close">
 				<text class="lf-iconfont icon-shanchu"></text>
 			</view>
@@ -17,6 +24,11 @@
 				default: true
 			}
 		},
+		data(){
+			return {
+				list: ['https://picsum.photos/200', 'https://picsum.photos/200']
+			}
+		},
 		created(){
 			
 		},
@@ -41,13 +53,17 @@
 		position: fixed;
 		left: 0;
 		top: 0;
+		z-index: 99;
 		.box{
 			width: 600rpx;
 			height: max-content;
-			.img{
+			.swiper{
 				width: 600rpx;
 				height: 840rpx;
-				border: 1rpx solid #979797;
+				.img{
+					width: 100%;
+					height: 100%;
+				}
 			}
 			.close{
 				width: 70rpx;

components/lf-nav/lf-nav.vue

@@ -1,7 +1,7 @@
 <template>
 	<view>
 		<view :style="{marginBottom: spreadOut ? headHeight + 'px' : '0px'}">
-			<view :class="{head: true, 'border-b': boderBottom}" :style="{height: headHeight + 'px', background: baColor}">
+			<view :class="{head: true, 'border-b': boderBottom}" :style="{height: headHeight + 'px', background: bgColor}">
 			 <block v-if="diy">
 				 <view class="diy-head" :style="{'top': headHeight - 38 + 'px'}">
 					 <slot></slot>
@@ -33,7 +33,7 @@
 				type: Boolean, // 是否显示左侧操作菜单
 				default: false
 			},
-			baColor: {
+			bgColor: {
 				type: String, // head背景颜色
 				default: '#f8f8f8'
 			},
@@ -136,6 +136,7 @@
   top: 0;
   left: 0;
   z-index: 99999;
+  transition: all .2;
 }
 .head .head-nav{
   position: absolute;

main.js

@@ -16,7 +16,8 @@ if(wechat.isWechat()){
 import config from './common/js/config.js'  
 import store from '@/store/index.js';
 Vue.config.productionTip = false
-
+import uView from 'uview-ui';
+Vue.use(uView);
 Vue.prototype.$shared = $shared;
 Vue.prototype.$http = sandBox;
 Vue.prototype.$cookieStorage = cookieStorage;

pages.json

@@ -1,4 +1,7 @@
 {
+	"easycom": {
+		"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
+	},
 	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
 		{
 			"path": "pages/index/index/index",

pages/index/index/index.vue

@@ -1,17 +1,16 @@
 <template>
     <block v-if="microData && microData.micro_page && microData.micro_page.meta">
-		<lf-nav title="主页"></lf-nav>
+		<lf-nav title="主页" :spreadOut="false" :bgColor="nav_bg_color"></lf-nav>
 		<view id="microData" :style="{background: microData.micro_page.meta.background_color}">
 			<!-- #ifdef MP-WEIXIN -->
 		<!-- 	<view class="about-program" @tap="changeAbout" v-if="is_show_init">
 			    <image mode="widthFix" v-if="is_show_about" src="https://cdn.ibrand.cc/%E5%85%B3%E4%BA%8E.png"></image>
 			</view> -->
 			<!-- #endif -->
-		   <view @click="$url('/pages/shop/shopdetail')">测试跳转</view>
+		   <!-- <view @click="$url('/pages/shop/shopdetail')">测试跳转</view> -->
 		    <block v-if="microData && microData.pages && microData.pages.length">
 		        <view v-for="(item, index) in microData.pages" :key="index">
-		            <view v-if="item.name == 'micro_page_componet_search'">
-		                <!--搜索按钮-->
+		            <!-- <view v-if="item.name == 'micro_page_componet_search'">
 		                <view class="banner">
 		                    <view class="search">
 		                        <div class="menu-box" @tap="jumpMenu"><i class="iconfont icon-fenzu"></i></div>
@@ -21,7 +20,7 @@
 		                        </view>
 		                    </view>
 		                </view>
-		            </view>
+		            </view> -->
 		            <!--轮播图组件-->
 		            <view v-if="item.name == 'micro_page_componet_slide' && item.value && item.value.length">
 					
@@ -387,8 +386,8 @@
                 userInfo: '',
                 microData:"",
 				is_login:'',// 是否是登陆状态
-				show_ad: true
-					
+				show_ad: true, // 是否显示ad广告
+				nav_bg_color: 'transparent' // 导航背景颜色
             };
         },
         // 注册组件
@@ -461,6 +460,14 @@
            this.queryMicroData();
             this.init(e);
            
+        },
+		// 页面滚动
+		onPageScroll(event){
+			if(event.scrollTop >= 100){
+				this.nav_bg_color = '#ffffff';
+			}else{
+				this.nav_bg_color = 'transparent';
+			}
 		},
 		//下拉刷新
 		onPullDownRefresh(){

uni.scss

@@ -1,3 +1,4 @@
+@import '@/uview-ui/theme.scss';
 /**
  * 这里是uni-app内置的常用样式变量
  *
@@ -14,6 +15,8 @@
 
 /* 颜色变量 */
 
+
+
 /* 行为相关颜色 */
 $uni-color-primary: #007aff;
 $uni-color-success: #4cd964;