我要提问

src/app/app.component.html

 <!--The content below is only a placeholder and can be replaced.-->
-<router-outlet></router-outlet>
-<ydlife-guide-page *ngIf="shareGuidePageEnable"></ydlife-guide-page>
-<ydlife-alert *ngIf="isNeedAlert" [dialogInfo]="dialogInfo" (popInfo)="getPopInfo()"></ydlife-alert>
-<div class="returnIndexBox" *ngIf="isShowIndexBtn" appDrag>
-    <div><i class="iconfont icon-shouye"></i></div>
-    <div>首页</div>
-  </div>
\ No newline at end of file
+<div ydlifeScroll>
+  <router-outlet></router-outlet>
+  <ydlife-guide-page *ngIf="shareGuidePageEnable"></ydlife-guide-page>
+  <ydlife-alert *ngIf="isNeedAlert" [dialogInfo]="dialogInfo" (popInfo)="getPopInfo()"></ydlife-alert>
+  <div class="returnIndexBox" *ngIf="isShowIndexBtn" appDrag>
+      <div><i class="iconfont icon-shouye"></i></div>
+      <div>首页</div>
+  </div>
+  <div class="questionContainer" id="menuContainer">
+      <div style="position: relation;" *ngIf="askIconFlag">
+        <div (click)="showMenu()">
+          <img src="assets/images/ask.gif" alt="" srcset="">
+        </div>
+        <div class="closeIcon" (click)="askIconFlag=false;menuShowFlag=false">X</div>
+      </div>
+      <ul id="menuListContainer" *ngIf="menuShowFlag">
+        <li [routerLink]="'/ask'">我要提问</li>
+        <li [routerLink]="'/my_question'">我的问题</li>
+      </ul>
+  </div>
+</div>
\ No newline at end of file

src/app/app.component.scss

+.questionContainer{
+    position: fixed;
+    right: 0;
+    top: 50%;
+    width: 80px;
+    height: 80px;
+    #menuListContainer{
+        
+        // transform: translateY(1000px);
+        li{
+            height: 50px;
+            text-align: center;
+            background: rgba(0,0,0,0.5);
+            margin-bottom: 5px;
+            line-height: 50px;
+            color: #fff;
+        }
+    }
+    .closeIcon{
+        position: absolute;
+        right: 2px;
+        top: 0;
+        color: #fff;
+        font-size: 18px;
+        border-radius: 50%;
+        width: 26px;
+        height: 26px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background: #c7c7c7;
+    }
+    &#menuContainer{
+        transition: all 0.5s ease-out;
+    }
+}
\ No newline at end of file

src/app/app.component.ts

-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, ElementRef, OnDestroy, OnInit } from '@angular/core';
 import { AuthService } from "./auth/auth.service";
 import { LifeCommonService } from "./common/life-common.service";
 import { Subscription } from "rxjs/index";
-import {Router, NavigationStart} from '@angular/router';
+import {Router, NavigationStart, ActivatedRoute} from '@angular/router';
+
 
 declare var wx: any;
 @Component({
@@ -19,11 +20,24 @@ export class AppComponent implements OnInit, OnDestroy {
   // 是否显示首页浮标
   isShowIndexBtn: boolean;
   loginId:any;
-  constructor(private router: Router,private authService: AuthService, private lifeCommonService: LifeCommonService) {
+  // 提问icon显示隐藏
+  askIconFlag:boolean = true;
+  menuShowFlag:boolean = false;
+  constructor(private router: Router,
+    private authService: AuthService, 
+    private lifeCommonService: LifeCommonService,
+    private activatedRoute:ActivatedRoute,
+    private el:ElementRef) {
     this.subscription = lifeCommonService.shareStatus$.subscribe(status => {
       this.shareGuidePageEnable = status == '1';
     });
+
+  
   }
+ 
+
+
+
 
   ngOnInit() {
     this.loginId = localStorage.getItem('lifeCustomerInfo')?JSON.parse(localStorage.getItem('lifeCustomerInfo')).mobileNo:null;
@@ -47,6 +61,10 @@ export class AppComponent implements OnInit, OnDestroy {
     this.subscription.unsubscribe();
   }
 
+  // 菜单展示
+  showMenu(){
+    this.menuShowFlag = !this.menuShowFlag;
+  }
 
   // 微信JS-SDK注册
   ydWxConfig() {

src/app/app.module.ts

@@ -14,13 +14,15 @@ import { SafeHtmlPipe } from './safe-html.pipe';
 import { LocalStorage } from './domain/local.storage';
 import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
 import { DragDirective } from './directive/drag.directive';
+import { ScrollDirective } from './directive/scroll.directive';
 
 @NgModule({
   declarations: [
     AppComponent,
     PageNotFoundComponent,
     SafeHtmlPipe,
-    DragDirective
+    DragDirective,
+    ScrollDirective
   ],
   imports: [
     BrowserModule,

src/app/directive/scroll.directive.spec.ts

+import { ScrollDirective } from './scroll.directive';
+
+describe('ScrollDirective', () => {
+  it('should create an instance', () => {
+    const directive = new ScrollDirective();
+    expect(directive).toBeTruthy();
+  });
+});

src/app/directive/scroll.directive.ts

+import { Directive, ElementRef, HostListener } from '@angular/core';
+
+@Directive({
+  selector: '[ydlifeScroll]'
+})
+export class ScrollDirective {
+
+  constructor(private el:ElementRef) { }
+
+  @HostListener('touchmove') onTouchmove(){
+    this.el.nativeElement.querySelector('#menuContainer').style.transform = 'translateX(40px)'
+  }
+  @HostListener('touchend') onTouchcancel(){
+    setTimeout(()=>{
+      this.el.nativeElement.querySelector('#menuContainer').style.transform = 'translateX(0)'
+    },1000)
+  }
+}