uni-app项目_uniapp项目-优快云博客

本文详述了使用uni-app开发电商应用的过程，包括设置pages.json中的轮播图属性，如autoplay和interval，实现商品列表结构及导航跳转，封装可复用的商品列表组件，集成上拉加载更多和下拉刷新功能，拨打电话，使用地图，创建可滚动的分类导航栏，并处理点击事件，以及图片预览、时间格式化、富文本显示等。同时，讨论了底部导航组件的使用问题和小程序、H5、安卓应用的打包发布流程。

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.商品列表结构