uni-app介绍全局样式引入和底部导航栏开发

 4997

uni-app介绍全局样式引入和底部导航栏开发


前言

本文先介绍了uni-app项目中引入全局样式的种类,即App.vue中引入官方CSS样式库、自定义图标库和CSS动画库;再介绍了在pages.json中定义globalStyle;最后实现了项目的导航栏开发。

一、App.vue引入全局样式

一个标准的uni-app项目的目录结构如下:

  1. ┌─cloudfunctions        云函数目录
  2. │─components            符合vue组件规范的uni-app组件目录
  3. │  └─comp-a.vue         可复用的a组件
  4. ├─hybrid                存放本地网页的目录
  5. ├─platforms             存放各平台专用页面的目录
  6. ├─pages                 业务页面文件存放的目录
  7. │  ├─index
  8. │  │  └─index.vue       index页面
  9. │  └─list
  10. │     └─list.vue        list页面
  11. ├─static                存放应用引用静态资源(如图片、视频等)的目录,注意:静态资源只能存放于此
  12. ├─wxcomponents          存放小程序组件的目录
  13. ├─main.js               Vue初始化入口文件
  14. ├─App.vue               应用配置,用来配置App全局样式以及监听
  15. ├─manifest.json         配置应用名称、appid、logo、版本等打包信息
  16. └─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目录下。

此时再在Community_Dating的App.vue文件中导入uni.css即可,如下:

  1. <script>
  2.     export default {
  3.         onLaunch: function() {
  4.             console.log('App Launch')
  5.         },
  6.         onShow: function() {
  7.             console.log('App Show')
  8.         },
  9.         onHide: function() {
  10.             console.log('App Hide')
  11.         }
  12.     }
  13. </script>
  14. <style>
  15.     /*每个页面公共css */
  16.     @import url("./common/uni.css");
  17. </style>

2、引入自定义图标库

引入的图标主要是引入iconfont(https://www.iconfont.cn/)提供的图标。

需要先根据关键字搜索所需要的图标,并选择喜欢的图标添加至购物车,再到购物车中添加图标到当前项目(如果还没有项目可以直接创建形目再添加),再将图标和样式下载到本地。

解压下载的压缩包,将其中的 iconfont.css 拷贝到common目录下,并改名为icon.css,并修改其中的内容,删除对其他平台的兼容,只保留base64的图片即可,类似如下:

  1. @font-face {font-family: "iconfont";
  2.   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 {
  3.   font-family: "iconfont" !important;
  4.   font-size: 16px;
  5.   font-style: normal;
  6.   -webkit-font-smoothing: antialiased;
  7.   -moz-osx-font-smoothing: grayscale;}.icon-shouye:before {
  8.   content: "\e681";}

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

  1. <script>
  2.     export default {
  3.         onLaunch: function() {
  4.             console.log('App Launch')
  5.         },
  6.         onShow: function() {
  7.             console.log('App Show')
  8.         },
  9.         onHide: function() {
  10.             console.log('App Hide')
  11.         }
  12.     }
  13. </script>
  14. <style>
  15.     /*每个页面公共css */
  16.     /* 官方CSS库 */
  17.     @import url("./common/uni.css");
  18.     /* 自定义图标库 */
  19.     @import url("./common/icon.css");
  20. </style>

再在pages/index/index.vue中使用导入的图标,如下:

  1. <template>
  2.     <view>
  3.         <text class="iconfont icon-shouye" style="font-size: 100rpx; color: #007AFF;">Hello</text>
  4.     </view>
  5. </template>
  6. <script>
  7.     export default {
  8.         data() {
  9.             return {                 
  10.             }
  11.         },
  12.         onLoad() {
  13.         },
  14.         methods: { 
  15.         }
  16.     }
  17. </script>

显示:


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中导入,如下:

  1. <script>
  2.     export default {
  3.         onLaunch: function() {
  4.             console.log('App Launch')
  5.         },
  6.         onShow: function() {
  7.             console.log('App Show')
  8.         },
  9.         onHide: function() {
  10.             console.log('App Hide')
  11.         }
  12.     }
  13. </script>
  14. <style>
  15.     /*每个页面公共css */
  16.     /* 官方CSS库 */
  17.     @import url("./common/uni.css");
  18.     /* 自定义图标库 */
  19.     @import url("./common/icon.css");
  20.     /* 动画库 */
  21.     @import url("./common/animate.css");
  22. </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中演示如下:

  1. <template>
  2.     <view>
  3.         <text class="iconfont icon-shouye" style="font-size: 100rpx; color: #007AFF;">Hello</text>
  4.         <view style="display: flex; justify-content: center; padding: 50rpx;">
  5.             <view class="animate__animated" hover-class="animate__rubberBand" style="border: 5rpx solid #4CD964; padding: 20rpx;">橡胶带点击效果</view>
  6.         </view>
  7.         <view style="display: flex; justify-content: center; padding: 50rpx;">
  8.             <view class="animate__animated" hover-class="animate__swing" style="border: 5rpx solid #4CD964; padding: 20rpx;">摆动点击效果</view>
  9.         </view>
  10.         <view style="display: flex; justify-content: center; padding: 50rpx;">
  11.             <view class="animate__animated" hover-class="animate__rotateInDownLeft" style="border: 5rpx solid #4CD964; padding: 20rpx;">向左下角旋转点击效果</view>
  12.         </view>
  13.     </view>
  14. </template>
  15. <script>
  16.     export default {
  17.         data() {
  18.             return { 
  19.             }
  20.         },
  21.         onLoad() { 
  22.         },
  23.         methods: { 
  24.         }
  25.     }
  26. </script>
  27. <style>
  28.     
  29. </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如下:

  1. {
  2.     "pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
  3.         {
  4.             "path": "pages/index/index",
  5.             "style": {
  6.                 "navigationBarTitleText": "uni-app"
  7.             }
  8.         }
  9.     ],
  10.     "globalStyle": {
  11.         "navigationBarTextStyle": "black",
  12.         "navigationBarTitleText": "uni-app",
  13.         "navigationBarBackgroundColor": "#F8F8F8",
  14.         "backgroundColor": "#F8F8F8"
  15.     }
  16. }

可以看到,是以对象的形式存储的:

第一个属性是pages,用来定义所有页面,包括路径、样式等;

第二个属性是 globalStyle,用于配置全局样式,其属性和含义可参考https://uniapp.dcloud.net.cn/collocation/pages?id=globalstyle。

常见属性及其含义如下:


属性类型默认值描述
navigationBarBackgroundColorHexColor#F7F7F7导航栏背景颜色(同状态栏背景色)
navigationBarTextStyleStringwhite导航栏标题颜色及状态栏前景颜色,仅支持 black/white
navigationBarTitleTextString导航栏标题文字内容
navigationStyleStringdefault导航栏样式,仅支持 default/custom。custom即取消默认的原生导航栏
backgroundColorHexColor#ffffff下拉显示出来的窗口的背景色
backgroundTextStyleStringdark下拉 loading 的样式,仅支持 dark / light
enablePullDownRefreshBooleanfalse是否开启下拉刷新
onReachBottomDistanceNumber50页面上拉触底事件触发时距页面底部距离,单位只支持px
backgroundColorTopHexColor#ffffff顶部窗口的背景色(bounce回弹区域)
backgroundColorBottomHexColor#ffffff底部窗口的背景色(bounce回弹区域)
titleImageString导航栏图片地址(替换当前文字标题),支付宝小程序内必须使用https的图片链接地址


pages.json配置如下:

  1. {
  2.     "pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
  3.         {
  4.             "path": "pages/index/index",
  5.             "style": {
  6.                 // "navigationBarTitleText": "uni-app"
  7.             }
  8.         }
  9.     ],
  10.     "globalStyle": {
  11.         "navigationBarTextStyle": "black",
  12.         "navigationBarTitleText": "Community Dating",
  13.         "navigationBarBackgroundColor": "#FFFFFF",
  14.         "backgroundColor": "#FFFFFF"
  15.     }
  16. }

页面效果如下:


602397865f2a6.png


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

三、底部导航栏开发

底部导航栏主要包括社区、动态、消息和我的4个模块,需要准备图标(未选中和选中两种状态),可以在iconfont上选择并下载即可。

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

配置tabbar时可参考文档 https://uniapp.dcloud.net.cn/collocation/pages?id=tabbar,具体配置如下:

(1)在pages目录下新建其他3个页面:

直接右键pages选择新建页面,以news页面为例如下:


602397c3e0cfb.png


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

  1. <template>
  2.     <view>
  3.         动态页
  4.     </view>
  5. </template>
  6. <script>
  7.     export default {
  8.         data() {
  9.             return {   
  10.                          
  11.             }
  12.         },
  13.         methods: {             
  14.         }
  15.     }
  16. </script>
  17. <style>
  18.     
  19. </style>

再配置pages.json如下:

  1. {
  2.     "pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
  3.         {
  4.             "path": "pages/index/index",
  5.             "style": {
  6.                 // "navigationBarTitleText": "uni-app"
  7.             }
  8.         }
  9.         ,{
  10.             "path" : "pages/news/news",
  11.             "style" :
  12.             {
  13.                 "navigationBarTitleText": "",
  14.                 "enablePullDownRefresh": false
  15.             }
  16.         }
  17.         ,{
  18.             "path" : "pages/msg/msg",
  19.             "style" :   
  20.             {
  21.                 "navigationBarTitleText": "",
  22.                 "enablePullDownRefresh": false
  23.             }
  24.         }
  25.         ,{
  26.             "path" : "pages/my/my",
  27.             "style" :
  28.             {
  29.                 "navigationBarTitleText": "",
  30.                 "enablePullDownRefresh": false
  31.             }
  32.         }
  33.     ],
  34.     "globalStyle": {
  35.         "navigationBarTextStyle": "black",
  36.         "navigationBarTitleText": "Community Dating",
  37.         "navigationBarBackgroundColor": "#FFFFFF",
  38.         "backgroundColor": "#FFFFFF"
  39.     },
  40.     "tabBar": {
  41.         "color":"#323232",
  42.         "selectedColor":"#ED6384",
  43.         "backgroundColor":"#FFFFFF",
  44.         "borderStyle": "black",
  45.         "list": [
  46.             {
  47.                 "pagePath": "pages/index/index",
  48.                 "text": "首页",
  49.                 "iconPath": "static/tabbar/index.png",
  50.                 "selectedIconPath": "static/tabbar/indexed.png"
  51.             },
  52.             {
  53.                 "pagePath": "pages/news/news",
  54.                 "text": "动态",
  55.                 "iconPath": "static/tabbar/news.png",
  56.                 "selectedIconPath": "static/tabbar/newsed.png"
  57.             },
  58.             {
  59.                 "pagePath": "pages/msg/msg",
  60.                 "text": "消息",
  61.                 "iconPath": "static/tabbar/paper.png",
  62.                 "selectedIconPath": "static/tabbar/papered.png"
  63.             },
  64.             {
  65.                 "pagePath": "pages/my/my",
  66.                 "text": "我的",
  67.                 "iconPath": "static/tabbar/home.png",
  68.                 "selectedIconPath": "static/tabbar/homed.png"
  69.             }
  70.         ]
  71.     }
  72. }

显示:


uniapp social app tabbar run


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

总结

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


本文网址:https://www.zztuku.com/detail-8649.html
站长图库 - uni-app介绍全局样式引入和底部导航栏开发
申明:如有侵犯,请 联系我们 删除。

评论(0)条

您还没有登录,请 登录 后发表评论!

提示:请勿发布广告垃圾评论,否则封号处理!!

    编辑推荐