个人中心
gpt4 book ai didi

javascript - CSS:Spinner 覆盖原始微调器的设置，每个微调器需要不同的 css 设置

转载 作者：塔克拉玛干 更新时间：2023-11-02 21:11:06 28 4
gpt4 key购买 nike

我在 ionic 1 框架中有两种类型的微调器。 ionic 旋转器最初具有深色背景。因此，我使用下面的代码将其关闭。

应用程序.js

.constant('$ionicLoadingConfig', {
    noBackdrop: true,
    //duration: 1800,
    animation: 'fade-in',
    template: '<ion-spinner icon="crescent" class="spinner-energized"></ion-spinner>',

})

应用.css

.loading{
  background-color:transparent!important;
}

但是，我需要一个与其他微调器不同的页面。仅适用于页面 special.js 我想要带有原始深色背景的微调器。但是，使用我设置的代码，app.js 中的微调器设置被覆盖。

特殊.js

        $scope.$on("$ionicView.afterEnter",
            function (event, data) {
                $ionicLoading.show({
                    noBackdrop: true, duration: 1888,
                    template: '<ion-spinner icon="dots" class="spinner-balanced"></ion-spinner> <br/>Analyzing'

                });
                $scope.watchLists = $watcherFactory.getWatchLists();
                $scope.currentWatchList = window.localStorage.getItem('currentWatchList');
                console.log($scope.currentWatchList);
                if ($scope.watchLists.length > 0)
                    $scope.getWatchedStocks();
                else {
                    $ionicLoading.hide();
                    $scope.currentWatchList = "_";
                }

特殊.css

.loading{
  background-color:black!important;
}

如何使 special.css 中的微调器仅限于该页面而不覆盖所有微调器？

目前，所有微调器的背景都设置为黑色

app.js 加载时我想要的微调器是(橙色，不是那么明显) enter image description here

加载 special.js 时我想要的微调器是 enter image description here

请注意，在移动应用程序中，用户会从一个页面跳转到另一个页面，我只希望 special.js 页面的微调器具有深色背景。 app.js 微调器被认为是应用程序中的默认微调器，调用 special.js 时除外。

更新:(kite.js.org)

应用.css

.loading {
    background-color:transparent!important;
}
.special-page .loading {
    background-color:black!important;
}

特殊.js

    $rootScope.isSpecial = true; 
    $scope.$on('$destroy', function() 
               {delete $rootScope.isSpecial});



    $scope.$on("$ionicView.afterEnter",
        function (event, data) {
            $ionicLoading.show({
                noBackdrop: true, duration: 1888,
                template: '<ion-spinner icon="dots" class="spinner-balanced"></ion-spinner> <br/>Analyzing'

            });
            $scope.watchLists = $watcherFactory.getWatchLists();
            $scope.currentWatchList = window.localStorage.getItem('currentWatchList');
            console.log($scope.currentWatchList);
            if ($scope.watchLists.length > 0)
                $scope.getWatchedStocks();
            else {
                $ionicLoading.hide();
                $scope.currentWatchList = "_";
            }



        }
    );

默认微调器显示透明背景，但 spcial.js 仍然显示透明背景而不是黑色

最佳答案

$ionicLoading附加 div.loading-container至 <body> ，我不能简单地使用单个选择器来控制不同的页面；因此问题变成了我如何改变<body>进入特殊页面时的类，我的解决方案并不优雅，但假设工作:

  • 在正文中添加一个 ngClass:<body ng-class="{'special-page': isSpecialPage}"> , 当 isSpecialPage 时触发是真的
  • 注入(inject) $rootScope对于 special.js 的 Controller ，以及:
    • 放$rootScope.isSpecialPage = true在 Controller 的开头，所以 <body>会有一个 special-page进入此页面(ui状态)时的类
    • 听$destroy事件，变化 $rootScope.isSpecialPage = false , 所以 special-page当作用域被销毁(状态改变)时被移除
$scope.$on('$destroy', function() {
    $rootScope.isSpecialPage = false;
});
  • 现在你可以这样写css了:
.loading {
    background-color:transparent!important;
}
.special-page .loading {
    background-color:black!important;
}

添加最小样本:

angular.module('ionicApp', ['ionic'])
.controller('AppCtrl', function($scope, $timeout, $ionicLoading, $rootScope) {

  function showLoading() {
    // Setup the loader
    $ionicLoading.show({
      content: 'Loading',
      animation: 'fade-in',
      showBackdrop: true,
      maxWidth: 200,
      showDelay: 0
    });

    $timeout(function () {
      $ionicLoading.hide();
      $scope.msg = 'content loaded ' + new Date();
    }, 2000);
  }
  
  $scope.showLoading = function(isSpecial) {
    $rootScope.isSpecial = isSpecial;
    showLoading();
  }
});
.loading {
  background-color: transparent !important;
}

.special-page .loading {
  background-color: rgba(0, 0, 0, 0.5) !important;
}
<html ng-app="ionicApp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
    
    <title>Ionic Modal</title>

    <link href="https://code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
    <script src="https://code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
  </head>
  <body ng-controller="AppCtrl" ng-class="{'special-page': isSpecial}">
    
      <ion-view title="Home">
        <ion-header-bar>
          <h1 class="title">Sample Ionic Loading</h1>
        </ion-header-bar>
        <ion-content has-header="true">
          <ion-list>
            <ion-item ng-click="showLoading();">Click to show transparent Loading</ion-item>
            <ion-item ng-click="showLoading(true);">Click to show special Loading</ion-item>
            <ion-item ng-if="msg">{{msg}}</ion-item>
          </ion-list>
        </ion-content>
      </ion-view>
    
  </body>
</html>

关于javascript - CSS:Spinner 覆盖原始微调器的设置，每个微调器需要不同的 css 设置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47474342/

28 4 0
文章推荐： Javascript比较多个对象数组
文章推荐： android - 是否可以从 android 中的 Skype 帐户获取联系人？
文章推荐： 本地图区域自动移动时，Android map v2 变得低质量
文章推荐： android - 如何在 Android 中录制视频时嵌入文本？
塔克拉玛干
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com