uni-app + uView学习笔记2

新建项目，引入uView

新建项目u-shop，选择默认模板，vue2

1. 使用插件安装sass(scss)、uView
2. 在main.js中引入uView主JS库

import uView from '@/uni_modules/uview-ui'
Vue.use(uView)

3. 在uni.scss中引入uView的全局SCSS主题文件

@import '@/uni_modules/uview-ui/theme.scss';

4. 在App.vue中引入uView基础样式

<style lang="scss">
	@import "@/uni_modules/uview-ui/index.scss";
</style>

5. 测试，在index.vue中引入组件

	<view class="content">
		<u-button type="primary" :plain="true" text="镂空"></u-button>
	</view>

源码地址

uni-app + uView u-shop项目源码

---

Navbar自定义导航栏

pages.json文件中，指定页面的navigationStyle值为custom

"pages": [
	// navbar-自定义导航栏
	{
		"path": "/pages/navbar/index",
		"style": {
			"navigationStyle": "custom" ,// 隐藏系统导航栏
			"navigationBarTextStyle": "white" // 状态栏字体为白色，只能为 white-白色，black-黑色 二选一
		}
	}
]

页面

<template>
	<view>
		<u-navbar title="丰卖商城" :bgColor="bgColor" :titleStyle="titleStyle">
		</u-navbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgColor: '#001f3f',
				titleStyle: {
					color: '#ffffff'
				}
			}
		},
	}
</script>

---

swiper轮播图

1. 图片数组

<u-swiper :list="banner" duration="2000" :circular="true" height="200"></u-swiper>


		data() {
			return {
				banner: [
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				]
			}
		},

2. 图片对象数组

<u-swiper :list="banner1" keyName="image" duration="2000" :circular="true" height="200"></u-swiper>


		data() {
			return {
				banner1: [{
					image: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					title: '标题1'
				}, {
					image: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					title: '标题2'
				}, {
					image: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
					title: '标题3'
				}, ],
			}
		},

---

NoticeBar滚动通知

<u-notice-bar :text="noticeContent" mode="closable" speed="150" url="/pages/componentsB/tag/tag"></u-notice-bar>


		data() {
			return {
				noticeContent: 'uView UI众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用'
			}
		},

---

自定义样式文件

新建文件common/css/common.css

page {
	height: 100%;
	width: 100%;
	background-color: #f8f8f8;
}

.container {
	height: 100%;
	width: 100%;
}

/* 主题色 */
.main-color {
	color: #1bbf80;
}

.white-color {
	color: #ffffff;
}

.black-color {
	color: #333333;
}

.normal-color {
	color: #666666;
}

.gray-color {
	color: #999999;
}

.light-color {
	color: #cccccc;
}

在App.vue中引入样式

<style lang="scss">
	/*每个页面公共css */
	@import "@/uni_modules/uview-ui/index.scss";
	@import "common/css/common.css";
</style>

---

宫格布局组件

普通样式

			<u-grid-item v-for="(baseListItem,baseListIndex) in baseList" :key="baseListIndex">
				<u-icon :customStyle="{paddingTop:20+'rpx'}" :name="baseListItem.name" :size="22"></u-icon>
				<text class="grid-text">{{baseListItem.title}}</text>
			</u-grid-item>
			
			
		data() {
			return {
				baseList: [{
						name: 'photo',
						title: '图片'
					},
					{
						name: 'lock',
						title: '锁头'
					},
					{
						name: 'star',
						title: '星星'
					},
				]
			}
		},	
				
		
<style scoped lang="scss">
	.grid-text {
		font-size: 14px;
		color: #909399;
		padding: 10rpx 0 20rpx 0rpx;
		/* #ifndef APP-PLUS */
		box-sizing: border-box;
		/* #endif */
	}
</style>				

自定义样式

		<u-grid :col="5" :border="false">
			<u-grid-item v-for="(item,index) in cateList" :key="index">
				<image :src="item.cateImg" class="img-80 u-border u-border-radius-big u-p-10"></image>
				<text class="grid-text">{{item.cateTitle}}</text>
			</u-grid-item>
		</u-grid>
		
		
		data() {
			return {
				cateList: [{
					cateId: '1',
					cateImg: 'https://www.onenessxy.com/uploads/20210727/01f957cd788e2cefb6991a15dab88176.png',
					cateTitle: '交互设计'
				},{
					cateId: '2',
					cateImg: 'https://www.onenessxy.com/uploads/20210727/67c387777fbf4e93c34039e906fe8c12.png',
					cateTitle: '视觉设计'
				},{
					cateId: '3',
					cateImg: 'https://www.onenessxy.com/uploads/20210727/01f957cd788e2cefb6991a15dab88176.png',
					cateTitle: 'APP设计'
				},{
					cateId: '4',
					cateImg: 'https://www.onenessxy.com/uploads/20210727/67c387777fbf4e93c34039e906fe8c12.png',
					cateTitle: '小程序'
				},{
					cateId: '5',
					cateImg: 'https://www.onenessxy.com/uploads/20210727/01f957cd788e2cefb6991a15dab88176.png',
					cateTitle: '网站模板'
				},{
					cateId: '6',
					cateImg: 'https://www.onenessxy.com/uploads/20210727/67c387777fbf4e93c34039e906fe8c12.png',
					cateTitle: '短视频'
				},{
					cateId: '7',
					cateImg: 'https://www.onenessxy.com/uploads/20210727/01f957cd788e2cefb6991a15dab88176.png',
					cateTitle: '引流广告'
				},{
					cateId: '8',
					cateImg: 'https://www.onenessxy.com/uploads/20210727/67c387777fbf4e93c34039e906fe8c12.png',
					cateTitle: '网络安全'
				},{
					cateId: '9',
					cateImg: 'https://www.onenessxy.com/uploads/20210727/01f957cd788e2cefb6991a15dab88176.png',
					cateTitle: '服务器'
				},{
					cateId: '10',
					cateImg: 'https://www.onenessxy.com/uploads/20210727/67c387777fbf4e93c34039e906fe8c12.png',
					cateTitle: '商务合作'
				}]
			}
		},	
			
			
<style scoped lang="scss">
	.u-p-10 {
		padding: 10rpx;
	}
	.grid-text {
		font-size: 14px;
		color: #909399;
		padding: 10rpx 0 20rpx 0rpx;
		/* #ifndef APP-PLUS */
		box-sizing: border-box;
		/* #endif */
	}
</style>			

---

Search搜索框

<u-search placeholder="请输入商品名称..." v-model="keyword" :animation="true" shape="square" class="px-20"></u-search>