我这个是在ionic框架里面写的，其它框架要用这种效果，也可以之间拿去用。核心的DOM操作和CSS代码不变就好了，前提是你要把代码看懂之后才能套到其它框架里面用。横简单。
先看效果图如下：
当我点击后效果图：
代码如下:
简短的思路说一下，这里引入了一个ionfont图标，定义好样式后，就是基本的js DOW操作了，默认样式为 dispay:none 为影藏；点击的时候在给赋值为新的 class 属性 让他显示出来，然后做一个基本的判断就好了:当影藏的时候点击显示，当显示的时候，点击隐藏；
<!-- ==========================侧边栏类容（html代码）=========================================== -->
===showAside()显示=====
<div class="iconfont icon-iosshaixuan" *ngIf="search == 1" (click)="showAside()"></div>
==show(影藏)==
<div id="width" (click)="show()"></div>
<div id="uui">
<div class="jj hei">
<div style="flex:1">所属部门</div>
<div class="bbc right">请选择</div>
<div class="iconfont icon-iosyou tu"></div>
</div>
<!-- === -->
<div class="jj hei">
<div style="flex:1">所属业务员</div>
<div class="bbc right">请选择</div>
<div class="iconfont icon-iosyou tu"></div>
</div>
<!-- === -->
<div class="jj hei">
<div style="flex:1">经销商级别</div>
</div>
<ion-grid>
<ion-row>
<ion-col col-4>
<div class="sele hover">普通</div>
</ion-col>
<ion-col col-4>
<div class="sele">待签代理</div>
</ion-col>
<ion-col col-4>
<div class="sele">三级代理</div>
</ion-col>
</ion-row>
</ion-grid>
</div>
</div>
<div clas="iconfont icon-iosyou"></div>
============css代码=======================
#width{width:100%;height:100%;background-color:rgba(135, 135, 135, 0.5);position:absolute;right:0px;top:0px;transform: translate(100%,0);transition: all 0.1s;}
#uui{width:85%;height: 100%;background:white;position:absolute;right:0px;top:0px;transition: all 0.5s;transform: translate(100%,0);}
.jj{display: flex;align-items:center;}
.bbc{color:#a8a8a9;}
.hei{height:37px;width: 94%;margin: auto}
.tu{font-size:13px;color:#a8a8a9;}
.right{margin-right:7px;}
.sele{width:90px;height:30px;background:#f4f6fd;text-align: center;display:flex;justify-content:center;align-items: center;height:33px;font-size:14px;}
.hover{background-color:rgba(232, 247, 250);border: 1px solid #43a390;border-radius: 4px;}
===============js代码===================
showAside() {
let asideDone: any = document.getElementById('width');
asideDone.style.transform = 'translate(0,0)';
let asideDoneR: any = document.getElementById('uui');
asideDoneR.style.transform = 'translate(0,0)';
show() {
let asideDone: any = document.getElementById('width');
asideDone.style.transform = 'translate(100%,0)';
let asideDoneR: any = document.getElementById('uui');
asideDoneR.style.transform = 'translate(100%,0)';
我这个是在ionic框架里面写的，其它框架要用这种效果，也可以之间拿去用。核心的DOM操作和CSS代码不变就好了，前提是你要把代码看懂之后才能套到其它框架里面用。横简单。先看效果图如下：当我点击后效果图：代码如下:简短的思路说一下，这里引入了一个ionfont图标，定义好样式后，就是基本的js DOW操作了，默认样式为 dispay:none 为影藏；点击的时候在给赋值为新的 clas...
About
此项目是ionic3开源项目 。贡献代码请提供email。
来了就留个 :paw_prints:吧，star一下证明你来过 :squinting_face_with_tongue:
如果对您对此项目有兴趣，可以点 "Star" 支持一下 谢谢！ ^_^
或者您可以 "follow" 一下，我会不断开源更多的有趣的项目
如有问题请直接在 Issues 中提，或者您发现问题并有非常好的解决方案，欢迎 PR :thumbs_up:
传送门1：
传送门2：
传送门3：
传送门4：
传送门5：
ionic3
git clone https://github.com/artdong/ionic3-awesome
cd ionic3-awesome
npm install
ionic serve (运行开发模式)
浏览器打开: http://localhost:8080
ionic cordova run build android
默认情况下，侧边栏菜单将只显示ion-side-menu-content容器的内容。
向左滑动时，将显示右边栏ion-side-menu容器的内容，向右滑动时，将显示左边栏 ion-side-menu容器的内容。
在ionic中，使用ion-side-menus指令定义侧边栏菜单：
最近开始参与新的项目的开发，关于前人留下来的一套Ionic+PhoneGap+Cordova的移动端开发的App，现在需要整改部分内容。也是头一次接触ionic，再加上Angular.js的一些语法了解了解，遇到了问题就解决问题，so easy！
回归正题，ionic中如何隐藏navBar的导航栏呢？
1. 核心代码：
给ion-view标签添加属性hide-nav-bar=“true”
这个地方，是ionic3的案例，这个案例中，主要做了三个事情：1、影藏了默认的返回按钮。2、隐藏了底部导航栏，3、实现侧滑菜单。其实这几样东西看起来挺简单的，但是我也是费了不少时间啊，破玩意刚玩，整得不太明白啊。
代码地址https://gitee.com/yellowcong/ionic实现效果侧滑菜单前台代码<ion-menu [content]="mycontent">
var app = angular.module("myApp", ["ionic"]);
app.controller("myCtrl", function ($scope, $ionicSideMenuDelegate) {
$scope.toggleLeft = function (
meta charset="UTF-8">
title>Ionic 侧边栏菜单的简单实现title>
link rel="stylesheet" href="../ionic/css/ionic.css">
script src="../ionic/js/ionic.bundle.min.js">script>
首先创建Image和Button如图：Button的父物件为Image
然后选中Image,打开window->Animation，创建滑入动画。完了后，Remove Animator，重复上面过程，创建划出动画。
最后利用第一个自动生成的动画状态机，创建如下关系：
加上一个Bool值(isShow)控制状态之间跳转：
状态之间的跳转条件应该能简单设置吧：点中箭头，在Inspe
应项目的不同所以菜单的层级也不固定，所以在这里我写了5层菜单，哈哈。首先是html代码。//菜单html代码<ul class="page-sidebar-menu">
<li ng-repeat="menu in menus">
<a ui-sref={{menu.router}} style="cursor: pointer" ng-click="getMenuName
最近用ionic3和angular4做APP，其中有个需求：用户无论在哪个页面只要超时了就弹界面要求用户输入PIN码。这时候必须是覆盖整个页面，除非PIN码正确否则其他内容都是disable的。（jq的方法在本文讨论之外）
写好了密码组件，发现弹框的时候底部的tab栏依然存在。。。
网上查到了隐藏底部tab栏的三种方法/终极方法等等，但仍然做不到随意的隐藏和显示，
这时跟我搭配的
您可以使用高德地图 JavaScript API，将其集成到
Ionic 应用程序中。您需要在您的应用程序中添加高德地图 JavaScript API 的引用，并使用相应的 JavaScript 代码调用它。以下是一个简单的示例：
1. 在您的 index.html 文件中添加以下代码：
```html
<script src="https://webapi.amap.com/maps?v=1.4.15&key=您的高德地图API Key"></script>
2. 在您的 TypeScript 文件中添加以下代码：
```typescript
import { Component, OnInit } from '@angular/core';
declare var AMap: any;
@Component({
selector: 'app-map',
templateUrl: './map.component.html',
styleUrls: ['./map.component.css']
export class MapComponent implements OnInit {
constructor() { }
ngOnInit() {
// 创建地图实例
const map = new AMap.Map('container', {
zoom: 10,
center: [116.39, 39.9]
// 添加标记
const marker = new AMap.Marker({
position: [116.39, 39.9],
map: map
3. 在您的 HTML 文件中添加以下代码：
```html
<div id="container" style="height: 500px;"></div>
这将在您的应用程序中创建一个简单的地图，并在地图上添加一个标记。您可以根据需要修改代码，以满足您的特定需求。
