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基础样式

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

源码地址

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

---

Navbar自定义导航栏

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

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

页面

---

swiper轮播图

1. 图片数组

		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. 图片对象数组

		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滚动通知

		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中引入样式

---

宫格布局组件

普通样式

			
				
				{{baseListItem.title}}
			
			
			
		data() {
			return {
				baseList: [{
						name: 'photo',
						title: '图片'
					},
					{
						name: 'lock',
						title: '锁头'
					},
					{
						name: 'star',
						title: '星星'
					},
				]
			}
		},	
				
		
				

自定义样式

		
			
				
				{{item.cateTitle}}
			
		
		
		
		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: '商务合作'
				}]
			}
		},	
			
			
			

---

Search搜索框