行列
行列
### yscroller ```css html, body{ touch-action: pan-y; user-select: none; } .page{ height:200px; overflow: hidden; background-color: tomato; touch-action: none; } .scroller{ transform: translate3d(0,0,0); } ``` ```html {{for(let i=0;i { let style...
### 模拟input > 移动端唤起软键盘会导致页面fixed定位等布局失效,对于需要输入数字等场景的,我们可以模块输入、模拟键盘,该组件仅模拟输入框。 > 输入框支持光标,支持光标移动,支持长按光标变大拖动改变位置 > 长按光标变大时,光标不再闪烁。输入、删除内容时光标不再闪烁 ```css @keyframes caret-blink{ 0% { opacity: 1; } 50%{ opacity: 1; } 80%{ opacity: 0; } 100%{ opacity: 0; } } .caret-anim{...
### 关于第3点 应该提供一整套的通用类库供这些应用使用,还是要考虑项目间公用类库的问题
源码在这里:https://github.com/thx/magix-gallery/tree/master/tmpl/mx-table 另外对于thead的sticky,现在的浏览器都不支持了 😭
#### 属性静态化 当模板是这样时 ```html {{=name}} ``` 编译出的js代码如下 ```js let $quick___0_static_attr={'class': 'a b','name': 'div',}; Magix.View.extend({ tmpl: ($$, $_create,$_viewId,$n)=> { let $_temp,$vnode_0=[], { name,}=$$, $vnode_1, $text; $vnode_1=[$_create(0,0,$n(name))];$vnode_0.push($_create('div',$quick___0_static_attr,$vnode_1)); return $_create($_viewId,0,$vnode_0); } , ```...
### 静态节点变量重用 ```html bb {{=f}} bb ``` 编译出的js代码如下 ```js if ($quick___0_static_node) { $vnode_0.push($quick___0_static_node); } else { $vnode_3 = [$_create(0, 0, 'bb')]; $vnode_2 = [$_create('div', 0, $vnode_3)]; $vnode_1 = [$_create('div', 0,...
#100
### display:contents 元素不参与布局,这对于`magix`项目中,因为有根节点,有时候不想根节点参与界面布局时非常有用
https://segmentfault.com/a/1190000041209570
节点附加`level`在第几层,`index`在当前层中第一个,以及`path`指向到当前节点的路径。 ```ts let treeData = [{ id: 'node1', text: 'node1', level:0, index:0, path:[0], children: [{ id: 'node3', pId: 'node1', text: 'node3', level:1, index:0, path:[0,0], children: [{ id: 'node5', pId: 'node3',...