小编Ser*_*nko的帖子

'use strict';
importScripts('./build/sw-toolbox.js');
importScripts('https://www.gstatic.com/firebasejs/4.9.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/4.9.0/firebase-messaging');

firebase.initializeApp({
  // get this from Firebase console, Cloud messaging section
  'messagingSenderId': '47286327412'
});

const messaging = firebase.messaging();

messaging.setBackgroundMessageHandler((payload) => {
  console.log('Received background message ', payload);
  // here you can override some options describing what's in the message; 
  // however, the actual content will come from the service sending messages
  const notificationOptions = {
    icon: '/assets/img/appicon.png'
  };
  return self.registration.showNotification(notificationTitle, notificationOptions);
});

self.toolbox.options.cache = {
  name: 'ionic-cache'
};

// pre-cache our key …

Run Code Online (Sandbox Code Playgroud)

progressive-web-apps firebase-cloud-messaging ionic3

Ser*_*nko

2018 02-08

6
推荐指数

1
解决办法

3903
查看次数

window.caches 在 Android Chrome 中未定义，但在桌面 Chrome 中可用

我对 Caches API 在移动设备上的可用性感到有些困惑。

https://developer.mozilla.org/en-US/docs/Web/API/CacheStorage

文档说明此 API 在服务工作线程范围和窗口范围内均可用。

我可以在桌面的 Chrome 上清楚地访问它，没有问题。

现在，每当我在 Android 的 Chrome 上进行功能检测时，我都会变得未定义，就好像功能不可用一样。

我试图通过这种方式检测：

if ('caches' in window)...
if ('caches' in self)...

Run Code Online (Sandbox Code Playgroud)

通过连接的设备等从控制台日志调用

我想念什么？

PS：我知道 Safari 有非常基本的实现，所以我预计 Safari 会出错，但在这里我正在 Android 上使用 Chrome 对其进行测试；/

android google-chrome cachestorage

Ser*_*nko

2019 07-11

6
推荐指数

1
解决办法

983
查看次数

重叠SVG元素区域填充的最佳方法是什么？

我正在研究SVG的一些基本图像处理,并试图找到以下挑战的最佳方法:

我们有一个SVG文件,它有各种SVG元素(圆形,矩形,三角形).它们彼此重叠,形成了不同形式的新"区域"(见图).

所以填充实际元素 - 没有问题.但是,如果我只想填充特定的交叉区域的颜色呢？

我目前的想法是:

考虑将所有元素绘制为路径,然后查看是否可以将整体构图视为一个大路径,然后使用填充规则.
考虑计算区域形状并在其上绘制新形状,然后填充它.
考虑其他事情？

区域的例子

javascript svg

Ser*_*nko

2020 02-28

5
推荐指数

2
解决办法

5674
查看次数

我想在 ionic 4 中创建一个自定义加载器，但在消息字段中它显示了 html 代码，但没有呈现我的 gif 图像

  async presentLoading() {
    const loading = await this.loader.create({ 
      duration: 2000,
      showBackdrop:false,
      cssClass:'sa',
      spinner:'false',
      message:`
      <div class="custom-spinner-container">
      <img class="loading" width="120px" height="120px" src="assets/loader1.gif" />
    </div>`
    });
    return await loading.present();
  }

Run Code Online (Sandbox Code Playgroud)

ionic4

sai*_*ddy

2018 11-03

5
推荐指数

1
解决办法

3253
查看次数

Angular 5 HttpClient比以前的Http有什么优势？

我阅读了官方升级指南,它说的是"因为HttpClient获得了广泛的采用,我们决定......" 但是这个HttpClient带来了什么真正的好处？

我正在考虑尝试一下,但是因为我不知道升级后需要发生什么,所以我感到很困惑:

从'@ angular/http'导入{Http,Headers,RequestOptions,ResponseContentType};

我试图找到一个"在新客户端中匹配:从'@ angular/common/http'导入{HttpClient,HttpParams,HttpHeaders}

但是不知道那些应该如何正确地"升级",因为指南没有说明它.

所以第二个问题 - 我们如何处理其他http事件？

httpclient angular

Ser*_*nko

lucky-day

4
推荐指数

1
解决办法

1917
查看次数

SVG 元素的生成和拖动 - 方法

我正在学习 Javascript/SVG 组合（动画和制作交互式 SVG）。

我想创建一个代码片段，其中可以将菜单元素（“库存”）拖到主屏幕（“画布”）上，而原始元素将保留在其位置（就像将其副本从原始元素中移出一样）元素）。

在这里，我尽我所能制作了代码片段：http : //codepen.io/cmer41k/pen/f2b5eea274cdde29b0b2dc8a2424a645

所以我设法做了一些事情，但它有问题：

我可以处理 1 个副本并使其可拖动，但是我不知道如何处理所有这些生成元素的 ID，这会导致拖动问题
我不明白如何让它无限期地工作（这样它就可以产生任何数量的可拖动到画布的圆圈）
画布中的可拖动元素经常重叠，我无法以它们不重叠的方式附加侦听器，因此我拖动的元素上的侦听器将“通过”那里的任何其他元素传播；（

问题基本上是 - 有人可以建议我应该放入这个片段的逻辑，这样它就不会那么麻烦。我很确定我在这里遗漏了一些东西；（（例如，它不应该那么难，不是吗？）

HTML：

<body>
<svg id="svg"
  height="800"
  width="480"
    viewbox="0 0 480 800"
    preserveAspectRatio="xMinYMin meet"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
>
    <rect id="canvasBackground" width="480" height="480" x="0" y="0"/>
    <rect id="inventoryBackground" width="480" height="100" x="0" y="480"/>


<g id="inventory">
<path id="curve4" class="inventory" d="M60,530 A35,35 0 1,1 60,531" />
<path id="curve3" class="inventory" d="M150,530 A35,35 0 1,1 150,531" />
<path id="curve2" class="inventory" d="M240,530 A35,35 0 1,1 240,531" />
<path id="curve1" class="inventory" d="M330,530 A35,35 …

Run Code Online (Sandbox Code Playgroud)

javascript svg clone element draggable

Ser*_*nko

lucky-day

2
推荐指数

1
解决办法

2047
查看次数

是/否 - 有没有办法用纯 SVG 工具改进鼠标拖动？

所以我花了一些时间尝试纯（无外部库）SVG 元素拖动。

\n\n

一般来说，一切都有效，但是快速移动的鼠标存在这个令人讨厌的问题：\n-当用户将可拖动的 SVG 元素靠近其边缘时\n-然后拖动（鼠标移动）这样的可拖动速度太快\n-鼠标“丢失”可拖动的

\n\n

这里更详细地描述了该问题：\n http://www.svgopen.org/2005/papers/AdvancedMouseEventModelForSVG-1/index.html#S3.2 \n此外，作者尝试通过利用 mouseout 事件来修复用户体验： \n http://nuclearprojects.com/blog/svg-click-and-drag-object-with-mouse-code/

\n\n

我在这里复制了上面的代码片段： http ://codepen.io/cmer41k/pen/zNGwpa

\n\n

我的问题是：

\n\n

是否没有其他方法（由纯 SVG 提供）来防止鼠标移动太快时 SVG 元素的这种“丢失”？

\n\n

我尝试解决这个问题是： \n- 检测（以某种方式）在未完成拖动的情况下发生了 mouseout 事件。\n- 如果是这样（我们有点检测到“断开连接”）- 将 SVG 元素与当前鼠标位置重新连接。

\n\n

这有什么行不通的原因吗？

\n\n

代码：

\n\n

\r\n

    var click=false; // flag to indicate when shape has been clicked\r\n    var clickX, clickY; // stores cursor location upon first click\r\n    var moveX=0, moveY=0; // keeps track of overall transformation\r\n    var lastMoveX=0, lastMoveY=0; // stores previous …

Run Code Online (Sandbox Code Playgroud)

mouse svg drag

Ser*_*nko

lucky-day

2
推荐指数

1
解决办法

2123
查看次数

离子 4 中可水平滚动的卡片

我正在使用 ionic 4，我想得到如下图所示的结果：

ionic4

Ahm*_*raz

2019 12-17

1
推荐指数

1
解决办法

4727
查看次数

这个绑定有什么问题？(Angular 2+)

更新3:

实际上我找到了导致我的代码初始问题的原因.如果我使用Ionic/Angular侦听器绑定到我的代码中的按钮 - 然后将变量for false更改为true - 确实会更改UI状态.

但是,如果我使用自定义侦听器('touchstart'),那么即使变量发生变化 - 它也不会导致UI刷新.我认为这是由角度渲染等方式起作用的.但我希望在某处记录下来.

编辑了代码片段+说明在代码片段中我们有父子组件,其中子项的发出事件需要更改父组件可见性.

编辑澄清问题更好:

在我的代码中,我有一个非常简单的组件(下面),我想让这些UI游侠在showSliders变量的布尔状态后动态显示/消失.

我验证了我在变量中获得了更新的值,但我想该视图只会在它呈现的时刻或类似的内容中读取它.

所以我再次看到UI没有显示[hidden] ="showSliders"(showSliders在这里是真的),反之亦然.

但问题是 - 如果页面已经在一个状态下呈现自己,那么动态更改变量不会导致UI出现/消失.

我有一个简单的方法来实现这一目标吗？

在javascript中,一旦得到布尔值,我可能会得到DIV的ID.style.display ="none".如何在角度2+中做同样的事情？

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { ChildComponent } from '../../components/child/child'

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  public hidden: boolean = false; 

  constructor(public navCtrl: NavController) {

  }
  toggleButton() {
    this.hidden = !this.hidden;
    console.log(this.hidden);
  }

  getEvent($event) {
    console.log($event);
    this.hidden = $event;
  }
}

// CHILD:

import …

Run Code Online (Sandbox Code Playgroud)

ionic-framework angular

Ser*_*nko

2017 08-23

0
推荐指数

1
解决办法

115
查看次数

在 Ionic 5 / Angular 9 项目上添加外部 Javascipt 文件

我想在我的 Ionic 5 / Angular 9 项目中添加一些 jquery 函数。

我从 angular.json 文件中调用文件。一些功能可以工作，因为我已经通过 npm 安装了 Jquery 和 Bootstrap。

但我不知道如何能够使用其他人。

这些是文件

"scripts": [
          "node_modules/jquery/dist/jquery.min.js",
          "node_modules/bootstrap/dist/js/bootstrap.min.js",
          "src/assets/js/bootstrap.min.js",
          "src/assets/js/charts.js",
          "src/assets/js/colors.js",
          "src/assets/js/filters.js",
          "src/assets/js/global.js",
          "src/assets/js/idangerous.swiper.min.js",
          "src/assets/js/isotope.pkgd.min.js",
          "src/assets/js/jqColorPicker.js",
          "src/assets/js/jquery-2.1.4.min.js",
          "src/assets/js/jquery-ui.js",
          "src/assets/js/jquery-ui.min.js",
          "src/assets/js/jquery.canvasjs.min.js",
          "src/assets/js/jquery.countTo.js",
          "src/assets/js/jquery.easy-autocomplete.min.js",
          "src/assets/js/jquery.mixitup.js",
          "src/assets/js/jquery.viewportchecker.min.js",
          "src/assets/js/magnific.js",
          "src/assets/js/map.js",
          "src/assets/js/script.js",
          "src/assets/js/sorttable.js",
          "src/assets/js/wow.js"
        ]
      },

Run Code Online (Sandbox Code Playgroud)

任何提示？

ionic-framework angular ionic4

Sim*_*Ioa

2020 07-22

0
推荐指数

1
解决办法

507
查看次数