uni-app项目

2021/7/6 23:39:25

本文主要是介绍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.商品列表结构

5.点击导航,跳转到不同页面

data:

methods:

6.封装商品列表组件(复用)

子组件:

父组件传值:

7.实现上拉加载更多和下拉刷新

(1)onReachBottom 上拉加载更多

(2)  enablePullRefresh下拉刷新  (先在pages.json中配置)

onPullDownRefresh

8.拨打电话  uni.makePhoneCall         

9.地图

<map></map>

10.实现左侧分类导航栏

(1)scroll-view   可滚动视图区域  组件。  属性scroll-y:纵向滚动

(2)点击高亮(点击当个分类,样式不同)

 

11.分类左侧对应的右侧数据

(1)获取点击分类的id(后台返回的id):请求参数

(2)发送请求:参数为点击的id

(3)展示右侧

 

(4)左侧初始化显示

(5)处理无数据

12. 图片预览

uni.previewImage      参数current,urls

13.跳转详情页(id)

14.处理时间   全局过滤器

15.rich  text 富文本

(1)

(2)处理溢出

App.vue  全局样式

16.商品详情页 底部导航   (扩展组件 uni ui)

https://ext.dcloud.net.cn/plugin?id=865

不显示,层级原因。

底部导航影响上边padding-bottom

17.小程序打包发布

18.h5打包

19.安卓打包



这篇关于uni-app项目的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程