css 实现app图标样式-ag凯发k8国际
uni-app 是一个使用 vue.js 开发所有前端应用的框架,是一种终极的跨平台ag凯发k8国际的解决方案,这里的平台,主要指的是app平台(android、ios)、小程序平台、h5平台。开发者编写一套代码,可发布到ios、android、h5、以及各种小程序(微信/支付宝/百度/头条/qq/钉钉)等多个平台。
01
开发一个小视频应用
一
初始化项目
打开hbuilderx ide,新建一个名称为mini-video的初始化uni-app项目,这里勾选uni-app即可创建,项目创建完成后,打开pages/index/index.vue,将中的模板内容content部分清空,将uni-app初始项目中与应用无关的东西进行清空、修改即可。 二 创建底部导航栏组件 首先要弄清楚我们的uni-app已经提供了tabbar的配置,即提供了底部导航栏的,那为什么还需要自定义底部导航栏呢 ?因为uni-app提供的默认底部导航栏tabbar的背景颜色只支持十六进制,所以无法设置为透明。同时我们又需要将底部导航栏中的页面设置为tabbar页面,所以我们还是要进行tarbar的配置,而一配置tabbar,那么就会自动出现uni-app提供的默认导航栏,所以我们必须在应用启动onlaunch的时候将默认tabbar进行隐藏。 那么没有了默认导航栏,我们怎么进行tabbar页面的切换呢?我们可以通过 在ios和安卓app平台上运行时,会出现tabbar隐藏失败的情况,解决办法就是隐藏的时候需要添加一个1000ms左右的延迟。 三 添加图标字体 添加图标字体非常简单,就是登录iconfont网站,然后创建一个图标项目,然后搜索自己需要的图标,比如加号、搜索、返回,将它们加入到项目中,然后点击下载即可,下载完成后解压,找到iconfont.css这个文件,这个就是我们要用到的图标字体的css样式,直接引入到项目中即可,为了方便使用,我们将图标字体css文件作为一个全局样式引入到app.vue组件中。使用的时候,我们只需要在需要添加图标字体的标签上,添加上"iconfont 具体的图标样式名"即可,如: 四 创建ag凯发k8国际首页头部导航栏 ag凯发k8国际首页头部导航栏,最左侧是一个搜索图标,中间是推荐和同城,右侧无内容。同样,我们的uni-app是有一个默认头部导航栏的,所以我们首先要隐藏掉默认的头部导航栏,要隐藏默认头部导航栏,我们需要在pages.json文件中设置其navigationstyle属性值为custom即自定义,如: 五 创建视频播放组件 视频播放组件即一个全屏的页面,然后里面嵌入一个 六 创建视频列表组件 视频列表组件,我们使用的是 七 向视频列表组件传入列表数据 视频列表组件和视频播放组件都已经完成后,就可以在ag凯发k8国际首页onload的时候获取视频数据,然后传递给视频列表组件,视频列表组件在遍历传递过来的视频列表将视频地址传入对应的视频播放组件中即可,这里采用mock数据的方式提供视频列表。 原文作者:rolan
以上是生活随笔为你收集整理的css 实现app图标样式_uni-app开发一个小视频应用(一)的全部内容,希望文章能够帮你解决所遇到的问题。
总结