uniapp2【搬代码】

我们预期想要的效果:

步骤;
1.创建项目：填写项目名称
2.重新选择项目保存的目录
3.点击确定

4.将图标倒入static中
5.在pages中创建vue如图所示
6.vue创建成功后，在pages.json中进行配置tabBar

"tabBar": {
		"color": "#999",
		"selectedColor": "#00b783",
		"borderStyle": "#fff",
		"backgroundColor": "#FFFFFF",
		"list": [
			{
				"pagePath": "pages/tabbar/index/index",
				"text": "首页",
				"iconPath": "static/head1.jpg",
				"selectedIconPath": "static/logo.png"
			},
			{
				"pagePath": "pages/tabbar/classlfy/classlfy",
				"text": "分类",
				"iconPath": "static/logo.png",
				"selectedIconPath": "static/logo.png"
			},
			{
				"pagePath": "pages/tabbar/study/study",
				"text": "学习",
				"iconPath": "static/head2.jpg",
				"selectedIconPath": "static/logo.png"
			},
			{
				"pagePath": "pages/tabbar/mien/mien",
				"text": "我的",
				"iconPath": "static/head1.jpg",
				"selectedIconPath": "static/logo.png"
			}
		]
	}

运行查看结果
安装scss



这样可以直接导入项目中后面需要用到

然后我们写一个顶部搜索栏

我们到 https://uniapp.dcloud.net.cn/component/uniui/uni-nav-bar.html

<template>
	
		<view>
			<view class="box-bg">
				<uni-nav-bar statusBar shadow>
					<view class="input-view">
						<uni-icons class="input-uni-icon" type="search" size="18" color="#999" />
						<input confirm-type="search" class="nav-bar-input" type="text" placeholder="输入搜索关键词"
							@confirm="confirm" />
					</view>
					<template v-slot:right>
							搜索
					</template>
				</uni-nav-bar>
			</view>
		</view>
	
</template>

<script>
	import uniNavBar from 'uni_modules/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue'
	
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		},
		components: {
			uniNavBar
		}
	}
</script>

<style lang="scss">
	$nav-height: 30px;
	.box-bg {
		background-color: #F5F5F5;
		padding: 5px 0;
	}
	
	
	
	.input-view {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		//width: 500rpx;
		flex: 1;
		background-color: #f8f8f8;
		height: $nav-height;
		border-radius: 15px;
		padding: 0 15px;
		flex-wrap: nowrap;
		margin: 7px 0;
		line-height: $nav-height;
	}
	
	.input-uni-icon {
		line-height: $nav-height;
	}
	
	.nav-bar-input {
		height: $nav-height;
		line-height: $nav-height;
		/* #ifdef APP-PLUS-NVUE */
		width: 370rpx;
		/* #endif */
		padding: 0 5px;
		font-size: 12px;
		background-color: #f8f8f8;
	}
</style>

``

轮播图

网址https://uniapp.dcloud.net.cn/component/swiper.html

<template>
	
		<view class="home">
			
			<NavBar />
			
			<view class="index_banner_box">
				
				<swiper class="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.image" mode=""></image>
					</swiper-item>
				</swiper>
				
			</view>
			
		</view>
	
</template>

<script>
	import NavBar from "../../../uni_modules/navbar/navbar.vue"
	
	export default {
		data() {
			return {
				topbanner:[]
			}
		},
		methods: {
			
		},
		mounted() {
			uni.request({
				url:'http://iwenwiki.com:3006/api/banner',
				success : (res) =>{
					console.log(res.data)
					this.topbanner = res.data.data
				}
			})
		},
		components: {
			NavBar
		}
	}
</script>

<style lang="scss">
	.home{
		display: flex;
		flex-direction: column;
		flex: 1;
		overflow: hidden;
		.index_banner_box{
			display: flex;
			width: 100%;
			padding: 10px;
			justify-content: center;
			align-items: center;
			border-radius: 5px;
			overflow: hidden;
			.swiper{
				width: 100%;
				height: 260rpx;
				.banner{
					width: 710rpx;
					height: 260rpx;
				}
			}
		}
	}
	
</style>

烂尾哈哈哈