ionic 框架的tabs能自定义界面吗？因为我们的界面样式，排版是不一样的。_百度知道
ionic 框架的tabs能自定义界面吗？因为我们的界面样式，排版是不一样的。
我有更好的答案
我也遇到这个问题，觉得你把这个页面的tab隐藏了吧隐藏方法：我在做项目时也遇到这个问题，有其他需要请追问
把连接重新发一下
采纳率：85%
为您推荐：
其他类似问题
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。Ionic-wechat项目边开发边学（三）:自定义样式,指令,服务 - 推酷
Ionic-wechat项目边开发边学（三）:自定义样式,指令,服务
上一篇文章主要介绍了一个ionic项目的标准目录结构，header标签的使用，以及页面之间的切换。这篇文章实现的功能有: 消息数据的获取, 消息列表的展示, 消息标为已读/未读, 主要涉及的到的知识点有:
ion-list的使用
ion-popup的使用
通过sass自定义样式
localStorage的使用
自定义指令和服务
先看效果图:
在开始之前, 最好先思考一下消息页面的主要功能, 和大概如何实现. 这样后面写程序才不会乱. 我大体列了一下
消息的数据暂时用localStorage存储, 但这不是好的方式, localStorage可能会被文件清理掉, 后面会换sqlite存储
首先在'tab-message.html'中添加聊天消息的布局
&ion-view&
&ion-content on-swipe-left=&onSwipeLeft()&&
&!--这里的rj-close-back-drop是自定义指令, 后面会讲是干嘛的--&
&ion-list rj-close-back-drop&
&ion-item class=&item-avatar& on-hold=&popupMessageOpthins($index)& rj-hold-active ng-repeat=&message in messages&&
&img ng-src=&{{message.pic}}&&
&!--这个就是来了新消息, 头像上的小红数字--&
&span class=&rj-sm-red-icon& ng-show=&message.showHints&&&p ng-bind=&message.noReadMessages&&&/p&&/span&
&h2 ng-bind=&message.name&&&/h2&
&p class=&rj-list-p& ng-bind=&message.lastMessage.content&&&/p&
&span class=&rj-push-right& ng-bind=&message.lastMessage.time&&&/span&
&/ion-item&
&/ion-list&
&/ion-content&
&/ion-view&
大家在试这个的时候, 由于'messages'还未定义, 先不绑定, 用实际的值代替,像这样
&img src=&img/ben.png&&
&span class=&rj-sm-red-icon&&&p&1&/p&&/span&
&h2&小王&/h2&
&p class=&rj-list-p&&你在干什么?&/p&
&span class=&rj-push-right&&12:30&/span&
这样就能看到效果了
自定义样式
可以看到上图有点丑, 需要我们自己修改样式, 可以自己添加css文件link进来, 但官方推荐使用sass的方式修改, 关于sass的语法, 可以看
, 看完就差不多可以了.
首先在项目目录下,运行命令
$ionic setup sass
$ionic serve
运行以后, 就会对 scss/ionic.app.scss 文件监控, 有修改, 会自动编译该文件, 输出到 css/ionic.app.css
所以你每次修改保存scss文件后, 浏览器会看到实时的效果, 非常方便.
打开 scss/ionic.app.scss 文件, 如下
To customize the look and feel of Ionic, you can override the variables
in ionic's _variables.scss file.
For example, you might change some of the default colors:
$positive:
$balanced:
$energized:
$assertive:
// The path for our ionicons font files, relative to the built CSS in www/css
$ionicons-font-path: &../lib/ionic/fonts& !
可以看到官方预定义的颜色几个颜色, 如果要修改预定义的颜色, 直接修改这里就可以了.
我们自己的样式, 直接在后面添加. 我们在后面添加
$item-avatar-border-radius: 0;
可以发现头像变成方的了, 那怎么知道修改这个变量呢?
打开 www/lib/ionic/scss/ 目录, 可以看到很多scss文件
├── _action-sheet.scss
├── _animations.scss
├── _backdrop.scss
├── _badge.scss
├── _bar.scss
├── _button-bar.scss
├── _button.scss
├── _checkbox.scss
├── _form.scss
├── _grid.scss
├── ionicons
├── ionic.scss
├── _items.scss
├── _list.scss
├── _loading.scss
├── _menu.scss
├── _mixins.scss
├── _modal.scss
这些都是官方的样式文件, 找到 items.scss 文件, 这个就是ion-item相关的样式, 再搜 border-radius 很快就能找到啦
具体的细节我就不说啦, 其它的修改都类似, 可以参考
popup的使用
关于$ionicPopup的详细使用, 可以参考
首先在 controllers.js 文件中添加一个controller:
.controller('messageCtrl', function($scope, $state, $ionicPopup, localStorageService, messageService) {
$scope.popup = {
isPopup: false,
$scope.onSwipeLeft = function() {
$state.go(&tab.friends&);
$scope.popupMessageOpthins = function($index) {
$scope.popup.index = $index;
//这里通过$ionicPopup.show()方法创建了一个自定义的popup
$scope.popup.optionsPopup = $ionicPopup.show({
templateUrl: &templates/popup.html&,
scope: $scope,
$scope.popup.isPopup = true;
//实现标为已读/未读, 注意$scope.popup.optionsPopup.close()方法
//用来关闭弹窗, 我竟然找了很久才发现这个接口
$scope.markMessage = function() {
var index = $scope.popup.index;
var message = $scope.messages[index];
if (message.showHints) {
message.showHints = false;
message.noReadMessages = 0;
message.showHints = true;
message.noReadMessages = 1;
$scope.popup.optionsPopup.close();
$scope.popup.isPopup = false;
messageService.updateMessage(message);
这里要注意两点
要在routes.js中将该controll传进去
需要通过自定义样式, 去掉自带的标题和按钮 //routes.js
.state('tab.message', {
url: '/message',
'tab-message': {
templateUrl: 'templates/tab-message.html',
controller: &messageCtrl&
自定义指令
细心的人会发现两个问题:
弹出popup时, 联系人列表没有动画效果
弹出popup后, 点击popup以外的地方, popup不能消失, 这两个问题, 就通过自定义指令来解决
首先在 directives.js 文件中添加 rjCloseBackDrop 指令, 用来解决上面第二个问题
.directive('rjCloseBackDrop', [function() {
scope: false,//共享父scope
restrict: 'A',
replace: false,
link: function(scope, iElm, iAttrs, controller) {
//要在html上添加点击事件, 试了很久- -!
var htmlEl = angular.element(document.querySelector('html'));
htmlEl.on(&click&, function(event) {
if (event.target.nodeName === &HTML& &&
scope.popup.optionsPopup &&
scope.popup.isPopup) {
scope.popup.optionsPopup.close();
scope.popup.isPopup = false;
再创建 rjHoldActive 指令, 用来解决第一个问题
.directive('rjHoldActive', ['$ionicGesture', '$timeout',
function($ionicGesture, $timeout, $ionicBackdrop) {
scope: false,
restrict: 'A',
replace: false,
link: function(scope, iElm, iAttrs, controller) {
$ionicGesture.on(&hold&, function() {
iElm.addClass('active');
//300ms后恢复
$timeout(function() {
iElm.removeClass('active');
最后分别在 ion-list 和 ion-item 上添加指令
&ion-list rj-close-back-drop&
&ion-item class=&item-avatar&rj-hold-active ng-repeat=&message in messages&&
ok, 问题解决, 有点小激动~
自定义服务
前面讲的都是界面的东西, 那聊天记录的数据哪里来?
这里我们自定义一个假json数据, 用来模拟, 在 www 目录下创建文件 data/json/messages.json
&messages&: [{
&name&: &李明&,
&pic&: &img/adam.jpg&,
&lastMessage&: {
&time&: & 15:34:55&,
&content&: &你在干什么?&,
&isFromeMe&: false
&noReadMessages&: 2,
&showHints&: true
目前用到的数据都定义在这, 后面还需要什么数据再添加
我们把数据存到 localstorage 中, 大家都知道 localstorage 是基于 key 和 value 存储的
总不能把所以人的消息都存在一条key中, 所以我定义两个服务
把整个json数据拆成单独的message, 把独立的message合并成一个对象
封装setItem, 基本数据的存储获取
具体我就不贴代码了, 讲下服务定义好了, 怎么使用, 比如定义了一个 test 服务:
.factory('test', ['', function(){
dosomething: function(){
用的时候直接把 test 注入, test.dosomething() 调用:
.controller('someCtrl', function($scope, test) {
test.dosomething();
是不是很简单?
这篇写的很长, 其实实现的功能很简单, 主要是要学会如何定义样式, 自定义指令, 自定义服务这样在后面实现更复杂的功能时, 不至于纠结这些细节.
我发现一个人自学, 确实有些困难, 一些小问题百度根本搜不到, google上才比较靠谱
所以小伙伴们遇到困难, 不妨google一下, 基本都有答案的哦有问题欢迎大家评论, 我会的会及时回复~
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致没有更多推荐了，
加入CSDN，享受更精准的内容推荐，与500万程序员共同成长！ionic3开发——记一个使用自定义icon的方法_技术栈
ionic3开发——记一个使用自定义icon的方法
segmentfault　·　
技术栈　·　
最近在使用ionic3和Angular开发一款App。开发体验还是挺好的。期间遇到如何在项目中使用自定义图标字体文件的问题，经过研究，找到了一个解决方法，记录一下。问题描述ionic项目提供了一套丰富的图标库，在ionic3中也进行了升级。虽然很实用，但是在实际项目中，还是需要根据视觉稿来增加图标。通常，我们都会使用@font-face导入自定的字体文件。那么我们怎么将这些图标融入到ionic3的项目中去呢？下面以ionic3中的tabs组件作为例子，提出一种解决方式。话说问题是解决了，但是看起来其实并不优雅，不过能解决问题。=.=||理解ionic3中的图标组件ionic icon的使用ionic3中提供图标使用的方式有不少，其中非常重要的组件是:ion-icon，基本的使用方法如下:&ion-icon name="heart" &&/ion-icon&name属性是图标的名称，这样ionic就会在这个标签处渲染生成一个图标。其他的用法，还有:ionic也为自己的图标库提供了一个预览的页面，tabs组件中使用icon在例子中，tabs组件使用图标的方式，是这样的:&ion-tabs&
&ion-tab tabIcon="heart" [root]='tabPage1'&&/ion-tab&
&ion-tab tabIcon="alarm" [root]="tabPage2"&&/ion-tab&
&ion-tab tabIcon="at" [root]="tabPage3"&&/ion-tab&
&/ion-tabs&通过设置tabIcon属性,就可以使用图标库中指定的图标。仔细看一下渲染后的html结构，你会发现，ion-tab其实是在模板中加入了ion-icon组件：那么，ionic是如何根据一个name属性，就链接到他的图标库中的图标呢？ionic使用图标的原理由于ionic3使用了Angular作为框架开发，因此ion-icon要么是组件，要么是指令。所以我们看看它的源码，是如何实现图标文件的使用的。源码传送门：从源码中我们可以看到，ionic把ion-icon定义为一个指令，有三个步骤:进行平台风格(ios、md）判断和状态的判断。根据判断的结果，将输入的图标名称，进一步组合成为如下形式的格式化文本ion-{平台风格标识}-{图标名}-{修饰}将上一步得到的格式文本，添加到元素的class属性中。至此，也很好理解了，通过一个css类，就可以使用图标库中的字体定义(@font-face)ionic将自己的图标字体的scss文件放在中，定义字体名称为Ionicons。而图标库则成为另外一个git项目，相关的类型放在中。在github中打开源码文件，ctrl+f搜索heart，可以看到css是这样的:.ion-ios-heart:before { content: "f443"; }
.ion-ios-heart-outline:before { content: "f442"; }通过伪元素，指明了对应的图标字体。-outline后缀指明的是轮廓形状的图标。知道了这些，我们就可以自定义字体文件和css类，从而让ion-icon也支持我们自定义的图标了。准备工作图标文件图标文件，一般大家都会用illustrator矢量设计软件设计，然后导出.svg格式的文件。要打包成字体文件，也有不少工具，常用的是阿里出品的 。具体使用方法，网站上讲解的非常清楚，这里就不多说了。当你上传自己的图标svg文件，导入项目，下载完成后，会得到一堆文件。有3种方式，可以使用图标:在例子中，我们选用fontclass足矣。部署文件将生成的字体文件拷贝到ionic项目src目录下assets中(具体目录根据项目的要求，这里只是例子)的fonts目录里。然后，书写一份.scss文件，内容如下:@import "ionicons-variables";
$jpicons-font-path: $font-path !
@font-face {
font-family: "jp-icon";
src: url('#{$jpicons-font-path}/iconfont.eot?t=4'); /* IE9*/
src: url('#{$jpicons-font-path}/iconfont.eot?t=4#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('#{$jpicons-font-path}/iconfont.woff?t=4') format('woff'), /* chrome, firefox */
url('#{$jpicons-font-path}/iconfont.ttf?t=4') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('#{$jpicons-font-path}/iconfont.svg?t=4#jp-iconfont') format('svg'); /* iOS 4.1- */
.jp-icon {
font-family:"jp-icon" !
font-size:16
font-style:
-webkit-font-smoothing:
-moz-osx-font-smoothing:
}字体名和路径等等，根据需要自定义就可以了。下一步，就可以定义自己的类名了，由于例子使用Material Design风格，因此，定义如下:.ion-md-jpicon__evalTab:before { content: "e64e"; }
.ion-md-jpicon__recTab:before { content: "e650"; }
.ion-md-jpicon__storeTab:before { content: "e651"; }名字的定义按照之前提到的格式化文本的形式就可以，这里由于想说明清楚的原因，我把名字定义的略复杂了一点，实际使用中可以按自己需要修改。最后别忘了一点，在你的基础样式表，比如:app.scss中导入这个scss文件。@import '../assets/fonts/jpicons.scss';无论怎样，当你准备好这些文件时，下一步就可以使用自己的图标字体啦。使用字体在tabs组件中，可以很方便的使用定义好的字体：&ion-tabs class="jp-tabs" &
&ion-tab tabIcon="jpicon__storeTab" [root]="store" tabTitle="精选推荐" tabUrlPath="store" &
&/ion-tab&
&ion-tab tabIcon="jpicon__recTab" [root]="recommend" tabTitle="应用场景" tabUrlPath="recommend" &
&/ion-tab&
&ion-tab tabIcon="jpicon__evalTab" [root]="evaluation" tabTitle="深度评测" tabUrlPath="evaluation" &
&/ion-tab&
&/ion-tabs&在tabs组件的.scss文件中,我们重新定义在该tabs组件下使用的字体名称:.jp-tabs{
.tab-button{
&&ion-icon{
font-family:"jp-icon" !
/*指定在当前组件中的ion-icon使用的字体名称*/
}此外，如果有定义图标字体颜色的需求，简单粗暴的方式是:.tabs-md .tab-button[aria-selected=true]{
color:$jp-
.tab-button-icon{
color:$jp-
}当一个tab被选中时，ionic会修改对应组件元素上的aria-selected,值是true/false。运行ionic serve，查看渲染后的效果:再看html代码，可以验证上面所讲到的内容。总结如果自定义组件和指令是不是也可以实现图标字体的使用？我想是可以的。本文只是提供了一种方法而已，不太优雅，但是可以解决问题。好处是，可以使用ionic中的一些关于图标的功能，例如，在tabs组件中，可以设置tabLayout属性来决定图标和文字的布局关系，如果要自己开发布局等功能，当然可行，但是需要花费时间。作为一种实现，本文的介绍也算作一种方式吧。但作为研究和推敲原理，我想应该更深入的发现更好的方式。个人能力有限，如果有什么错漏，请大家批评指正，之后会再补充内容。
责任编辑：admin　
二维码分享：
本文标签：
技术栈交流群群号：。技术栈交流群是一个以交流经验为目的，欢迎各位朋友加群。我们会不定期发布一些资源。18:49:53 UTC
I know ionic got date and time input type.
but I try to use “datetime”,not work.
how can I do for the datetime input ?
22:53:03 UTC
Actually, Ionic doesn’t have a custom Date/Time picker.
It defaults to the native OS pickers.
I don’t know if anything is in the roadmap for this.
Generally, using the native picker is suggested.
02:46:43 UTC
This may help to show what’s available on mobile devices:
Ionic is the app platform for web developers. Build amazing mobile, web, and desktop apps all with one shared code base and open web standards
13:40:58 UTC
You could try using some kind of javascript datetime-picker. I found
to work quite well.
Here is an example:
21:23:23 UTC
Thanks ! This was very helpful. I made it into a directive. See here:
09:59:16 UTC
Did someone try datetime-local as input type to get a precise date (/w hours + minutes). It seems to pop the native keyboards for iOS & Android. But not sure if it’s a good idea to use this.
12:35:58 UTC
Yes ! I set datetime-local as input type and it worked for me! I can choose date, hours and minutes.
16:30:56 UTC
is it possible to see this code?
I ask because I have tried datetime-local on my ionic app but it does not seem to set the ngModel to what is chosen.
It also doesnt trigger the ngChange on the input.
Was hoping to not have to use a library for this but I cant get the datetime-local values into my model.
10:47:34 UTC
I am also struggling to understand same question … How to datetime-local format ?
Please let me know if you have solved it!