我们预期想要的效果:

步骤;
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>

烂尾哈哈哈