uniapp的使用案例

目录

1.uni-app的简单介绍

    1.1关于uni-app官网

2.小程序商城实例

1.首页：

2.分页

3.购物车

4.导航栏

3.一个自己想的小项目

我自己做的一个页面有兴趣的话可以点击看一下

---

1.uni-app的简单介绍

    1.1关于uni-app官网

uni-app是一个基于Vue.js开发的跨平台应用开发框架，可以使用一套代码同时构建iOS、Android、H5、小程序等多个平台的应用。uni-app的特点是开发效率高、开发成本低、开发周期短，同时还具有良好的性能和用户体验。

可以直接点击以下链接进行查看uni-app官网:

https://uniapp.dcloud.net.cn/quickstart.htmlhttps://uniapp.dcloud.net.cn/quickstart.html

---

2.小程序商城实例

以下我跟着练的一个小程序商城实例：

1.首页：

先创建一个页面index然后写上我们的语法：

我使用了一个<hme-header></hme-header>组件，这是一个搜索样式的组件。

<template>
	<view class="index">
		<hme-header></hme-header>
		<view class="index-swiper">
			<swiper class="swiper" circular="true" indicator-dots="true" autoplay="true" interval="3000"
				duration="1000">
				<swiper-item v-for="(item,index) in swiperList" :key="index">
					<image :src="item.image_src" mode="widthFix"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="index-cate">
			<view class="image-box" v-for="(itme,index) in navList" :key="index">
				<image :src="itme.image_src" mode="widthFix"></image>
			</view>
		</view>
		<view class="index-floor">
			<view class="floor-group" v-for="(item,index) in floorList" :key="index">
				<view class="floor-title">
					<image :src="item.floor_title.image_src" mode="widthFix"></image>
				</view>
				<view class="floor-list">
					<view class="image-box" v-for="(item2,index2) in item.product_list" :key="index2">
						<image :src='item2.image_src' mode="scaleToFill"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				swiperList: [], //轮播图
				navList: [], //导航数据
				floorList: [] //楼层数据
			}
		},
		onLoad() {
			// this.getData();
			this.getSwiperList();
			this.getNavList();
			this.getFloorList();
		},
		methods: {

			getSwiperList() {
				uni.request({
					url: "../static/3/1",
					success: (res) => {
						console.log(res);
						this.swiperList = res.data.message;
					}
				})
			},
			getNavList() {
				uni.request({
					url: "../static/3/2",
					success: (res) => {
						console.log(res);
						this.navList = res.data.message;
					}
				})
			},
			getFloorList() {
				uni.request({
					url: "https://api-hmugo-web.itheima.net/api/public/v1/home/floordata",
					success: (res) => {
						console.log(res);
						this.floorList = res.data.message;
					}
				})
			},
			
		}
	}
</script>

<style lang="scss">
	page {
		padding-top: 90rpx;
	}

	.index-swiper {
		swiper {
			width: 750rpx;
		}

		image {
			width: 100%;
		}
	}

.index-cate{
	width: 750rpx;
	display: flex;
	.image-box{
		flex: 1;
		padding: 20rpx;
		image{
			width: 100%;
		}
	}
}
.index-floor {
		width: 750rpx;
		.floor-title {
			image {
				width: 100%;
			}
		}
		.floor-list {
			padding: 15rpx;
			.image-box {
				width: 240rpx;
				height: calc(240rpx * 386 / 232);
				float: left;

				&:nth-last-child(-n+4) {
					height: calc(240rpx * 386 / 232 / 2); 
					border-left: 10rpx solid #ffffff;
				}

				&:nth-child(2),	&:nth-child(3) {
					border-bottom: 5rpx solid #ffffff;
				}

				&:nth-child(4),	&:nth-child(5) {
					border-top: 5rpx solid #ffffff;
				}
				
				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
</style>

之后呢大概出来的效果图如下： 

2.分页

创建一个页面category 为我们的分类页，代码大概是这样：

<template>
	<view>
		<!-- 搜索框 -->
		<hme-header></hme-header>
		<!-- 分类 -->
		<view class="index-cate">
			<!-- 左侧菜单 -->
			<scroll-view class="left-menu" scroll-y="true">
				<view class="cate1" :class="index===currentIndex?'active':''" v-for="(item,index) in leftMenuList"
					:key="index" @tap="changeIndex(index)">
					{
  {item}}
				</view>
			</scroll-view>

			<!-- 右侧数据 (2级类+3级类列表)-->