uni-app项目

2021/7/6 23:39:25

编程Tag： 点击项目 https APP pages text id 100% uni

本文主要是介绍uni-app项目，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

一、

1.pages.json

{
	"pages": [ 
		{
			"path": "pages/index/index"
		},
		{
			"path":"pages/news/news",
			"style":{
				
			}
		},
		{
			"path": "pages/cart/cart"
		},
		{
			"path": "pages/member/member"
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "white",
		"navigationBarTitleText": "高格商城",
		"navigationBarBackgroundColor": "#CD0000",
		"backgroundColor": "#DBDBDB"
	},
	"tabBar":{
		"color":"#CCCCCC",
		"selectedColor":"#CD0000",
		"list":[
			{
				"text":"首页",
				"pagePath":"pages/index/index"
				// "iconPath":"",
				// "selectedIconPath":""
			},
			{
				"text":"资讯",
				"pagePath":"pages/news/news"
			},
			{
				"text":"购物车",
				"pagePath":"pages/cart/cart"
			},
			{
				"text":"会员",
				"pagePath":"pages/member/member"
			}
		]
	}
}

2.轮播图

circular：是否采用衔接滑动，即播放到末尾后重新回到开头

indicator-dots：是否显示面板指示点

autoplay：是否自动切换

interval：自动切换时间间隔

duration：滑动动画时长

<template>
	<view >
		<!-- banner轮播图 -->
		<view class="page-section-spacing">
			<swiper class="swiper" circular="true" indicator-dots="true" autoplay="true" interval="3500" duration="600">
				<swiper-item class="swiper-list" v-for="(item, index) in bannerList" :key="index">
					<view class="swiper-item uni-bg-red">
						<image class="swiper-img" :src="item.imageUrl" mode=""></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// tip:"点击「添加小程序」，下次访问更便捷",
				bannerList: [
					{
						imageUrl: 'https://cdn.zhoukaiwen.com/zjx_banner.png',
					},
					{
						imageUrl: 'https://cdn.zhoukaiwen.com/zjx_banner3.png',
					},
					{
						imageUrl: 'https://cdn.zhoukaiwen.com/zjx_banner1.png',
					},
					{
						imageUrl: 'https://cdn.zhoukaiwen.com/zjx_banner2.png',
					}
				],
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.swiper-item {
		width: 100%;
		height: 100%;
		image {
			width: 100%;
			height: 100%;
		}
	}
</style>

3.导航

<template>
	<view >
	    <!-- 导航 -->
		<view>
			<view class="nav">
				<view class="nav-item">
					<view>
						<u-icon name="car" color="#F08080" size="48"></u-icon>
					</view>
					<text>购物商城</text>
				</view>
				<view class="nav-item">
					<view>
						<u-icon name="gift" color="#B0C4DE" size="48"></u-icon>
					</view>
					<text>需求定制</text>
				</view>
				<view class="nav-item">
					<view>
						<u-icon name="file-text" color="#D15FEE" size="48"></u-icon>
					</view>
					<text>文章资讯</text>
				</view>
				<view class="nav-item">
					<view>
						<u-icon name="grid" color="#BCD2EE" size="48"></u-icon>
					</view>
					<text>最新好物</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default { 
		
	}
</script>

<style lang="scss">
	.nav {
		display: flex;
		width: 100%;
		text-align: center;
		height: 50rpx;
		line-height:50rpx;
		color: #999999;
		margin: 10rpx auto;
		.nav-item {
			width: 25%;
			
		}
	}
</style>

4.商品列表结构