uni-app学习笔记（一）

关于底部导航栏
在page.json加入

"tabBar": {
		"color": "#C0C4CC",
		"selectedColor": "rgb(0, 122, 255)",
		"borderStyle": "black",
		"backgroundColor": "#ffffff",
		"list": [{
				"pagePath": "pages/index/index",
				// "iconPath": "static/tab-home.png",
				// "selectedIconPath": "static/tab-home-current.png",
				"text": "首页"
			},
			{
				"pagePath": "pages/category/index",
				// "iconPath": "static/tab-cate.png",
				// "selectedIconPath": "static/tab-cate-current.png",
				"text": "分类"
			},
			{
				"pagePath": "pages/cart/cart",
				// "iconPath": "static/tab-cart.png",
				// "selectedIconPath": "static/tab-cart-current.png",
				"text": "购物车"
			},
			{
				"pagePath": "pages/user/user",
				// "iconPath": "static/tab-my.png",
				// "selectedIconPath": "static/tab-my-current.png",
				"text": "我的"
			}
		]
	}

关于轮播图
新建一个页面

swiper.vue页面内容

<template>
	<view class="uni-margin-wrap">
		<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
			<swiper-item>
				<view class="swiper-item uni-bg-red">A</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item uni-bg-green">B</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item uni-bg-blue">C</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// title: 'Hello'
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500
			}
		},
		onLoad() {
		},
		methods: {
	
		}
	}
</script>

<style>
	/* 背景色 */
	.uni-bg-red{
		background:#F76260; color:#FFF;
	}
	.uni-bg-green{
		background:#09BB07; color:#FFF;
	}
	.uni-bg-blue{
		background:#007AFF; color:#FFF;
	}
	.swiper-item {
		display: block;
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
	}
</style>

在index.vue页面内容

<Swiper class="swiper"></Swiper>
import Swiper from '../../components/swiper.vue'
	export default {
		components: {
			Swiper
		},