首頁 > web前端 > uni-app > 主體

uni-app介紹全域樣式引入和底部導覽列開發

coldplay.xixi
發布: 2021-02-09 17:59:39
轉載
5936 人瀏覽過

uni-app介紹全域樣式引入和底部導覽列開發

推薦(免費):uni-app開發教學

前言

#本文先介紹了uni-app專案中引入全域樣式的種類,即App.vue中引入官方CSS樣式庫、自訂圖示庫和CSS動畫庫;再介紹了在pages.json中定義globalStyle;最後實作了專案的導覽列開發。

一、App.vue引入全域樣式

一個標準的uni-app專案的目錄結構如下:

┌─cloudfunctions        云函数目录
│─components            符合vue组件规范的uni-app组件目录
│  └─comp-a.vue         可复用的a组件
├─hybrid                存放本地网页的目录
├─platforms             存放各平台专用页面的目录
├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
│  └─list
│     └─list.vue        list页面
├─static                存放应用引用静态资源(如图片、视频等)的目录,注意:静态资源只能存放于此
├─wxcomponents          存放小程序组件的目录
├─main.js               Vue初始化入口文件
├─App.vue               应用配置,用来配置App全局样式以及监听
├─manifest.json         配置应用名称、appid、logo、版本等打包信息
└─pages.json            配置页面路由、导航条、选项卡等页面类信息
登入後複製

其中, App.vue是uni-app的主元件,所有頁面都是在App.vue下切換的,是頁面入口文件,App.vue本身不是頁面、不能寫視圖元素。
這個檔案的功能包括:呼叫應用生命週期函數、配置全域樣式、配置全域的儲存globalData。
呼叫生命週期函數可以實現許多在特定的生命週期需要執行的動作,如在onLaunch時可以進行檢測更新、網路監聽、初始化資料等,onHide可用於應用程式運行到背景時暫停音樂、影片的播放。
該文件中可以引入樣式、圖示和動畫等。

1.引入官方CSS樣式庫

新建一個uni-app項目,模板選擇Hello uni-app,項目目錄下有common目錄,下方有uni.css文件,即為官方CSS樣式庫,在Community_Dating目錄下新建common目錄,並將uni.css拷貝到common目錄下。
同時需要將Hello uni-app專案static目錄下的uni.ttf字型檔案拷貝到Community_Dating專案的static目錄下。

如需直接使用樣式、字體和素材等文件,可以直接點選加QQ群 uni-app介紹全域樣式引入和底部導覽列開發963624318 ,在群組資料夾uni-app實戰之社區交友APP中下載即可。

此時再在Community_Dating的App.vue檔案中匯入uni.css即可,如下:

<script>
	export default {
		onLaunch: function() {
			console.log(&#39;App Launch&#39;)
		},
		onShow: function() {
			console.log(&#39;App Show&#39;)
		},
		onHide: function() {
			console.log(&#39;App Hide&#39;)
		}
	}</script><style>
	/*每个页面公共css */
	@import url("./common/uni.css");</style>
登入後複製

2.引入自訂圖示庫

#引入的圖示主要是引入iconfont(https://www.iconfont.cn/)提供的圖示。
需要先根據關鍵字搜尋所需的圖標,並選擇喜歡的圖標添加至購物車,再到購物車中添加圖標到當前項目(如果還沒有項目可以直接創建形目再添加),再將圖示和样式下載到本機。
示範如下:
uniapp social app import global style iconfont select download

解壓縮下載的壓縮包,將其中的iconfont.css拷貝到common目錄下,並改名為icon.css,並修改其中的內容,刪除對其他平台的相容,只保留base64的圖片即可,類似如下:

@font-face {font-family: "iconfont";
  src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAALcAAsAAAAABpQAAAKNAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcAqBIIEfATYCJAMICwYABCAFhG0HMBvFBcguMRUZ6a5kMRUuoHi5tW+/rgBAGIKnb7/fnd15Nh8Ti6JZtCQaoXySeLSuiUMjUZJYxUt4/7umuZYP3fR/viyrBkw/6fU4l5IbCsdGbXbCt27AitTkEqCAqwECzMynzSFqL2aS/uqBP8B/f9w7/b8BFMh8512Oa2+a1AUYTw5wL1xLuEBCb5hevsCB2A0BjDoZ0uzg+DxJoehBAsi6yXZIquBAURaOEcKGmYocE7HbcW0IR9H35Z9SKXAEHp21sIF90v1DE8VBGgcITghofgB4oAdBQVYaA3OiCCNEscUxmhAUReDr8LEKOaocYX+dTs0BoAYynonpWI9K6wBQSIUBhEmE17d6yWlm+uPnwtPv0uPP4v2Xc5bJZG+Rpc0y+Qx2cSOS7V6cnZcvXVK6cG4qsdcGePEtChB7yc7w2SlnNe20rD29ytTbkVuVrU63u641tfd8sU/ua+6gZmttpz9DwO7mbRmj/ylFAfjI8IGoT5pV4rMgPodR4F8xB5apYGu104vlC+AYEL2HHMOAFGQp8jlVUnpjESGm9PZMEbUZeGJaUMX3QECGEQiJmQCj29D8DMW4KKIJ0OUUgFDgBhx5PICnQAdV/AcElPmDkIKiYKxVvGKGtkx5huOOwH3YbYG557nUqoUcp88iq9k7PM+OiIvIQ9MNxVyhHB5CF/kSY8I6KwlBgXLPgUGwH9q2Bz73qrgnchUh/HI+T5tulNvzHCIzg0M7BLQP7GoBpj0eFw2qC3Ll87MQU2PbwTtKcvpFiAuZ7YOinMIAdEjgDip5lENCdUyJIFCA4jwOMAi6IZvNA/zmblVoj5BTmeDzleVNJTpUkNte5PzdGsDQUiemkyfcqHi1FhICAAAA') format('woff2');}.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;}.icon-shouye:before {
  content: "\e681";}
登入後複製

再在App.vue中匯入font.css,如下:

<script>
	export default {
		onLaunch: function() {
			console.log(&#39;App Launch&#39;)
		},
		onShow: function() {
			console.log(&#39;App Show&#39;)
		},
		onHide: function() {
			console.log(&#39;App Hide&#39;)
		}
	}</script><style>
	/*每个页面公共css */
	/* 官方CSS库 */
	@import url("./common/uni.css");
	/* 自定义图标库 */
	@import url("./common/icon.css");</style>
登入後複製

再在pages/index/index.vue中使用導入的圖標,如下:

<template>
	<view>
		<text>Hello</text>
	</view></template><script>
	export default {
		data() {
			return {
				
			}
		},
		onLoad() {

		},
		methods: {

		}
	}</script><style>
	</style>
登入後複製

顯示:
uniapp social app import global style iconfont run

可以看到,顯示了圖標,並且可以自訂樣式。

3.引入CSS動畫庫

動畫庫可以選擇使用animate.css(https://animate.style/)。
直接存取CDN下載CSS文件,地址為https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.css,右鍵選擇另存為並儲存即可,將其複製到common目錄下,再在App.vue中導入,如下:

<script>
	export default {
		onLaunch: function() {
			console.log(&#39;App Launch&#39;)
		},
		onShow: function() {
			console.log(&#39;App Show&#39;)
		},
		onHide: function() {
			console.log(&#39;App Hide&#39;)
		}
	}</script><style>
	/*每个页面公共css */
	/* 官方CSS库 */
	@import url("./common/uni.css");
	/* 自定义图标库 */
	@import url("./common/icon.css");
	/* 动画库 */
	@import url("./common/animate.css");</style>
登入後複製

在使用時,需要為元素添加class,目前使用的是4.1.1版本的animate.css,需要新增基本類別animate__animated,同時也需要根據選擇的動畫效果添加類別為animate__動畫名稱,例如animate__rubberBand,動畫名稱可以根據需要在https://animate. style/頁面右側選擇,並點選複製即可,如下:
uniapp social app import global style animate copy name

此時取得到的就是帶有animate__前綴的動畫類別名稱。
index.vue中示範如下:

<template>
	<view>
		<text>Hello</text>
		<view>
			<view>橡胶带点击效果</view>
		</view>
		<view>
			<view>摆动点击效果</view>
		</view>
		<view>
			<view>向左下角旋转点击效果</view>
		</view>
	</view></template><script>
	export default {
		data() {
			return {

			}
		},
		onLoad() {

		},
		methods: {

		}
	}</script><style></style>
登入後複製

其中,hover-class屬性用於指定按下去的樣式類,當hover-class="none"時,沒有點擊態效果。

示範如下:
uniapp social app import global style animate show

可以看到,實現了動畫效果。

说明:
微信小程序对动画效果的支持不高,可以选择Android或者iOS端进行真机测试

还可以使用v-if条件渲染实现动画效果,或者进行列表渲染时加入动画效果。

二、设置全局属性globalStyle

pages.json文件用来对 uni-app 进行全局配置,定义页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。

pages.json如下:

{
	"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	}}
登入後複製

可以看到,是以对象的形式存储的:
第一个属性是pages,用来定义所有页面,包括路径、样式等;
第二个属性是globalStyle,用于配置全局样式,其属性和含义可参考https://uniapp.dcloud.net.cn/collocation/pages?id=globalstyle。
常见属性及其含义如下:

属性 类型 默认值 描述
navigationBarBackgroundColor HexColor #F7F7F7 导航栏背景颜色(同状态栏背景色)
navigationBarTextStyle String white 导航栏标题颜色及状态栏前景颜色,仅支持 black/white
navigationBarTitleText String 导航栏标题文字内容
navigationStyle String default 导航栏样式,仅支持 default/custom。custom即取消默认的原生导航栏
backgroundColor HexColor #ffffff 下拉显示出来的窗口的背景色
backgroundTextStyle String dark 下拉 loading 的样式,仅支持 dark / light
enablePullDownRefresh Boolean false 是否开启下拉刷新
onReachBottomDistance Number 50 页面上拉触底事件触发时距页面底部距离,单位只支持px
backgroundColorTop HexColor #ffffff 顶部窗口的背景色(bounce回弹区域)
backgroundColorBottom HexColor #ffffff 底部窗口的背景色(bounce回弹区域)
titleImage String 导航栏图片地址(替换当前文字标题),支付宝小程序内必须使用https的图片链接地址

pages.json配置如下:

{
	"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				// "navigationBarTitleText": "uni-app"
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "Community Dating",
		"navigationBarBackgroundColor": "#FFFFFF",
		"backgroundColor": "#FFFFFF"
	}}
登入後複製

页面效果如下:
uniapp social app set global style view

显然,显示了自定义的全局样式。

三、底部导航栏开发

底部导航栏主要包括社区、动态、消息和我的4个模块,需要准备图标(未选中和选中两种状态),可以在iconfont上选择并下载即可,以我的为例,演示如下:
uniapp social app tabbar download icon

下载好4组图标并重命名之后,需要在static目录下新建tabbar目录,将这些图标拷贝到该目录下。

配置tabbar时可参考文档https://uniapp.dcloud.net.cn/collocation/pages?id=tabbar,具体配置如下:
(1)在pages目录下新建其他3个页面:
直接右键pages选择新建页面,以news页面为例如下:
uniapp social app tabbar create page news

并编辑pages/news/news.vue如下:

<template>
	<view>
		动态页	</view></template><script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}</script><style></style>
登入後複製

再配置pages.json如下:

{
	"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				// "navigationBarTitleText": "uni-app"
			}
		}
	    ,{
            "path" : "pages/news/news",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
        ,{
            "path" : "pages/msg/msg",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
        ,{
            "path" : "pages/my/my",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
    ],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "Community Dating",
		"navigationBarBackgroundColor": "#FFFFFF",
		"backgroundColor": "#FFFFFF"
	},
	"tabBar": {
		"color":"#323232",
		"selectedColor":"#ED6384",
		"backgroundColor":"#FFFFFF",
		"borderStyle": "black",
		"list": [
			{
				"pagePath": "pages/index/index",
				"text": "首页",
				"iconPath": "static/tabbar/index.png",
				"selectedIconPath": "static/tabbar/indexed.png"
			},
			{
				"pagePath": "pages/news/news",
				"text": "动态",
				"iconPath": "static/tabbar/news.png",
				"selectedIconPath": "static/tabbar/newsed.png"
			},
			{
				"pagePath": "pages/msg/msg",
				"text": "消息",
				"iconPath": "static/tabbar/paper.png",
				"selectedIconPath": "static/tabbar/papered.png"
			},
			{
				"pagePath": "pages/my/my",
				"text": "我的",
				"iconPath": "static/tabbar/home.png",
				"selectedIconPath": "static/tabbar/homed.png"
			}
		]
	}}
登入後複製

显示:
uniapp social app tabbar run

显然,已经完成底部导航栏配置。

总结

uni-app项目中App.vue是程序的入口文件,可以导入CSS样式、第三方的图标和动画库,从而加速开发;pages.json文件用于配置页面文件的路径、窗口样式和底部原生tabbar等,全局样式globalStyle也在该文件中配置;实现了项目的社区、动态、消息和我的4个模块的导航栏设置。

以上是uni-app介紹全域樣式引入和底部導覽列開發的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:csdn.net
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!