时间戳

首页 > 解决方案 > 离子范围如果为真，按下旋钮时会显示一个具有整数值的引脚。我可以在不按下旋钮的情况下默认显示吗？

ionic4 - 离子范围如果为真，按下旋钮时会显示一个具有整数值的引脚。我可以在不按下旋钮的情况下默认显示吗？

问题描述

如果离子范围为真，则按下旋钮时会显示一个具有整数值的引脚。我可以在不按下旋钮的情况下默认显示吗？

标签： ionic4

解决方案

<ion-range  #pin mode="md" min="0" max="100" pin="true" knob value="50" ></ion-range>

import { Component, OnInit, Input, ViewChild, AfterViewInit, ElementRef } from '@angular/core';

@Component({
  selector: 'app-range',
  templateUrl: './range.page.html',
  styleUrls: ['./range.page.scss'],
})
export class RangePage implements OnInit, AfterViewInit {
  time:any;

  @ViewChild('pin', { static: true}) pin: ElementRef;

  ngAfterViewInit(){
    // @ts-ignore
    let child = this.pin.el.shadowRoot.children
    let timer = setInterval(() => {
      if (child.length > 0){
        this.getPin() 
        console.log(child);
        
        clearInterval(timer)
      }
      
    });
  }
  
  getPin(){
   // @ts-ignore
    let children = this.pin.el.shadowRoot.children
    let pinEl = [...children].filter(f => {
      return f.className == 'range-slider'
    })
    let pin = pinEl[0].getElementsByClassName('range-pin')[0]
    pin.style.transform = 'translate3d(0px, -24px, 0px) scale(1)'
  }

推荐阅读