app笔记

在uni--app官网上下载搜索栏导航插件。

导航条不能遮住手机的状态栏：+statvsBar

<view class="example-body">

<uni-nav-bar statvsBar:fixed="false" color="#333333" background-color="#FFF" right-icon="scan">

<view class="example-body">

<uni-nav-bar  shadow statvsBar:fixed="false" color="#333333" background-color="#FFF" right-icon="scan">

shadow:导航栏下加阴影；

将一些模块化的代码比如说：搜索栏导航，页面的图片轮播...等写在另一个文档里，然后在主文档里引用更方便；

主页index的引用文件：Navbar；

<Navbar />

-------------------

import  Navbar from "..../components/navbar.vue"

---------------------------------------------

componemts:{

Navbar

}

  ------------------------------------

-------------------------------------

 Banner轮播图实现：

--

<template>
	<view class="home">
	<view class="index_banner_box">
		 <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500">
	  <swiper-item v-for="(item,index) in topBanner" :key="index">
	       <image class="banner" :src="item.img_url" mode=:""></image>
	      </swiper-item>
				</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				topBanner:[]
		},
		methods: {

		},
		mounted: {
			uni.request[{
				url:"http//htmls.bjxst.cm/api/index/banner"l,
				success(res) => {
					this.topBanner = res.data.top_banner
				}
			}]
		},
	}
</script>

<style lang="scss">
    .home {
		display: flex;
		flex-direction: column;
		flex: 1;
		overflow: hiddem;
		.index_banner_box {
			display: flex;
			width: 100px;
			padding: 10px;
			 
		}
	},
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>