小编Dua*_*nnx的帖子

我正在构建一个带有角形的形状,它可以很好地使用1个按钮.但是当我想要2个按钮时,它很难处理.

我想要1个按钮reset和1个按钮submit.reset必须放在之前submit.这是模板:

<form (ngSubmit)="submit()" [formGroup]="form">
    //inputs...
    <button type="submit" (click)="reset($event)">reset</button>
    <button type="submit">submit</button>
</form>

当我按下enter一个输入时,form火submit()和 两个reset($event)功能.点击reset按钮时也一样.我的期望是:

• 按enter或单击submit按钮时,表单仅启动submit()功能
• 单击reset按钮时,表单只有fire reset()功能
  
  

我能找到一个走一圈之前增加了隐藏式按键reset 按键,调event.stopPropagation(); event.preventDefault()中 reset()功能.但它很难看.有干净的方法吗？任何帮助,将不胜感激.非常感谢!

我正在尝试制作具有视差效果的水平剖面。背景中应该有一个图像，其滚动速度与页面不同。

问题是：我希望视差元素包含在父元素中，因此父元素的工作方式有点像子元素的掩码：子元素仅在父元素的边界内可见。

我知道这可以通过在两个背景元素之间设置视差元素来实现，这些元素的背景位于视差元素“上方”并遮挡它，但此方法不适用于我的情况。

我想到的一个明显的想法是在父级上使用溢出：隐藏。然而，这会破坏 3D 变换，因此不存在视差。

如何达到所描述的效果？

这是一个代码笔： https: //codepen.io/rradarr/full/mdwgard。我希望红色矩形在带有黑色边框的“视差容器”之外不可见。

* {
      margin: 0;
    }
    
    html, body {
      height: 100%
    }
    
    main {
      position: relative;
      width: 100%;
      
      perspective: 1px;
      transform-style: preserve-3d;
      overflow-y: auto;
      overflow-x: hidden;
      height: 100vh;
      
      background-color: blue;
    }
    
    .static {
      min-height: 800px;
    }
    
    .parallax-container {
      border: solid black 3px;
      height: 600px;
      width: 100%;
      transform-style: preserve-3d;
      position: relative;
    }
    
    .parallax-child {
      position: relative;
      width: 100%;
      height: 100%;
      transform: translateZ(-2px) scale(2.01);
      z-index: -1;
    }
    
    #img-or-whatever {
      height: 900px;
      width: …

我想对存储在云中的数据进行分页Firestore.它看起来像这样:

注意,它与加载更多或无限加载不同.让我们假设,当用户点击寻呼机3时,我需要向我发出请求,Firestore从50到75位获得25个项目(每页25个项目).

我应该这样做:

db.collection("cities")
    .orderBy("population")
      .startAfter(lastVisible)
        .limit(25);

这里的问题是我没有lastVisible.我知道我们可以获得lastVisible前50项,但它是如此愚蠢,因为如果我喜欢这样,为什么我不只是得到前75项并过滤我们想要的客户端.

问题是:如何通过查询从索引到其他索引获取多个项目Firestore？

任何帮助,将不胜感激!非常感谢!

我在我的项目中使用离子3,我有一些延迟加载的问题.

我有一个ResultPage与模板resultpage.html有超过1000的HTML代码行.在HomePage我想导航到ResultPage的navCtrl.setRoot.当我打电话给它时,屏幕在3-4s内冻结,然后带我去ResultPage.这真的是一个糟糕的用户体验.它只发生在lagre teamplate并且在我第一次进入该页面时.我决定删除延迟加载ResultPage和滞后消失.我不知道这是正确的方法吗？有人可以告诉我在这种情况下该怎么做？

非常感谢!

我想禁用跟踪点击输入类型范围,只允许通过拇指拖动.

我可以在除Microsoft Edge和Internet Explorer之外的所有浏览器中执行此操作.

我这样做

#slider {
  display: block;
  width: 400px;
  height: 40px;
  margin: 0px auto;
  padding: 5px 10px;
  z-index: 20;
  border-radius: 20px;
  pointer-events: none;
}

#slider::-moz-range-thumb {
  pointer-events: auto !important;
}

#slider::-webkit-slider-thumb {
  pointer-events: auto !important;
}

#slider::-ms-thumb {
  pointer-events: auto !important;
}

#slider::-ms-track {
  pointer-events: none !important;
}

<input id="slider" type="range" value="0" min="0" max="100" autocomplete="off" />

请查看为什么它不能在Microsoft Edge和Internet Explorer上运行,并建议任何可行的方法.

谢谢

该应用程序很简单,它结合了侧面菜单和选项卡.我认为它完美无缺,但直到我发现导航到root page然后按下浏览器上一个按钮会导致导航栏出现奇怪的闪烁.

这是我到目前为止的输出.

Menu.ts

import { Component,ViewChild } from '@angular/core';
import { IonicPage, NavController, NavParams, Nav } from 'ionic-angular';

export interface PageInterface {
    title: string;
    pageName: string;
    tabComponent?: any;
    index?: number;
    icon: string;
}

// Am I doing some mistakes in the following block? 
@IonicPage({
})
@Component({
  selector: 'page-menu',
  templateUrl: 'menu.html'
})

export class MenuPage {

    rootPage ="TabsPage";

    @ViewChild(Nav) nav: Nav;

    pages: PageInterface[]= [
        { title:'Tab 1', pageName: 'TabsPage', tabComponent: 'HomePage', index: 0, icon:'home' },
        { …

我正在研究工作中新项目的选择。我们正在考虑使用 nuxt （或者只是常规的 vue 3）并创建一个库来保存我们的共享组件。

我正在尝试进行初始设置，但遇到问题。我按照本教程创建了库并向其中添加了打字稿。我创建了一个带有计数器的示例组件并将其导出。

问题是，当我从消费项目（无论是 nuxt 项目还是普通 vite vue 项目）中的库导入组件时，该组件看起来不是响应式的。当点击它时，它的内部计数器应该会增加，但它并没有更新。控制台中没有错误或警告。

另一个问题是它的 CSS 没有被应用。它在组件中定义了一些基本样式，但它是不可见的。我在这里创建了一个带有设置说明的最小复制存储库： https: //github.com/drekembe/vite-reproduction-2342

我尝试过搜索类似的问题或自己调试它，但我没有取得任何进展。

任何帮助是极大的赞赏。

我试图在用户滚动页面时相对于视口缓慢移动图像.与此处发现的效果类似https://ihatetomatoes.net/demos/parallax-scroll-effect-part-2/

如果图像移动较小的值,则它会平滑移动.如果它被移动了更大的数量,那么它变得非常笨拙.

var imageOffset = lastScrollY * 0.9;
$image.css({top: `${imageOffset}px`});     //Runs badly

var imageOffset = lastScrollY * 0.3;
$image.css({top: `${imageOffset}px`});     //Runs well

为什么价值会如此影响绩效呢？

我尝试了所有不同的CSS样式(变换,顶部,底部,背景位置).Dev工具说我在60fps的时间限制内很好.如果页面上和多个浏览器和设备上只有图像,则会发生这种情况.这不仅适用于图像,也适用于文本或其他任何内容.

坏版本:https://jsfiddle.net/4vcg8mpk/58/

好的版本:https://jsfiddle.net/4vcg8mpk/59/

在Firefox中最引人注意的问题是,在Chrome中,它在第一次滚动时会很明显然后安定下来.最引人注目的是使用滚轮或触控板而不是拖动侧滚动条

因此，我在 Adob​​e illustrator 上创建了一些 SVG 并导出其路径，但我无法理解为什么我的路径与其他网站相比非常非常长。那么如果你做下面的代码分析。上面的一个是我的 SVG 路径，下面的一个来自另一个网站。我们俩的输出图标是相同的

我如何优化我的路径，走它也可以像其他人一样小。我注意到我的所有路径代码都是几百行前的。

JS 小提琴：https://jsfiddle.net/bf51j9yr/

别人的SVG：

<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="m10 20h9.006c1.65 0 2.994-1.347 2.994-3.009v-9.982c0-1.673- 
1.341-3.009-2.994-3.009h-14.012c-1.65 0-2.994 1.347-2.994 3.009v9.982c0 
1.673 1.341 3.009 2.994 3.009h2.006v-9c0-.552.447-1 1-1h6v-3.5l5.5 5- 
5.5 5v-3.5h-4z"></path>
</svg>

问候，比尔

我不知道为什么 Typescript 在使用接口时会抛出错误，但在类型上却可以正常工作。请考虑这段代码：

const fn = (a: { [key: string]: number | string }) => {
  console.log(a)
};

interface FooInterface {
  id: number;
  name: string;
}
type FooType = {
  id: number;
  name: string;
}

const fooInterface: FooInterface = { id: 1, name: 'name' };
const fooType: FooType = { id: 1, name: 'name' };

fn(fooType);
fn(fooInterface); <-- error here

游乐场链接

Typescript 将抛出一行错误fn(fooInterface);。它说：

Argument of type 'FooInterface' is not assignable to parameter of type '{ [key: string]: string …

我有一个像这样的代码块angular 2:

<div *ngFor="let elm of elms; let i = index" [attr.name]="name" text-center>
    {{elm }}
</div>

它工作正常.
但是,当我想动态设置属性名称基于索引像name-1="name" name-2="name"我不知道如何做到这一点.
我想[attr.name-{{i}}]="name"还是[attr.name- + i]="name",但它不工作.有什么办法吗？
非常感谢.

我想创建一个仅带有div标签的表。我只使用了两个类并且效果很好。
唯一的问题是表格内单元格的边框是表格边框的两倍宽度，看起来很丑。我知道原因是所有单元格周围都有边框，但我无法修复它。我在其他帖子中尝试过一些解决方案，但在这种情况下不起作用。
有人可以帮帮我吗？多谢。请注意，我不想添加更多课程。

.row { 
  height: 100%;
  display: flex;
  width: 100%;
  flex-wrap: wrap;
}

.col {
  border: solid 2px blue;
  padding: 5px;
  margin: 0;
  min-height: 1px;
  flex-grow: 1;
  max-width: 100%;
  text-align: center; 
}

<div class="row">
  <div class="col">x</div>
  <div class="col">x</div>
</div>
<div class="row">
  <div class="col">x</div>
</div>
<div class="row">
  <div class="col">x</div>
  <div class="col">x</div>
  <div class="col">x</div>
</div>
<div class="row">
  <div class="row">
    <div class="col">x</div>
    <div class="col">x</div>
  </div>
  <div class="row">
    <div class="col">x</div>
    <div class="col">x</div>
  </div>
</div>