uni-app项目

最新推荐文章于 2025-05-10 10:05:59 发布

青铜小菜姬

最新推荐文章于 2025-05-10 10:05:59 发布

阅读量2.1k

点赞数 9

文章标签： app

本文链接：https://blog.youkuaiyun.com/admin12345671/article/details/118500413

版权

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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: &

最低0.47元/天解锁文章