很久沒有寫部落格了，自從工作忙了就忘了學習新東西，真是越大越懶。
做專案中，需要乙個process流程的ui元件，翻遍公司元件和業界框架，都沒有滿足自適應要求的現成的process元件，只能自己實現。實現的過程中，發現有兩個有意思的地方，特此分享出來。
首先看看最後需要的效果：=> 點我檢視demo。
流程元件中，兩個hr構成圓點之間的連線線。
圓點用span 通過 border-raduis: 50%實現。
接下來，第乙個難點來了，如何實現 居中 並且 自適應。
自適應的意思是，拉伸瀏覽器的時候，流程元件也跟著變化長度，並且不變型。那麼，我們自然的想到了用百分數設定寬度。
第一張方案：
用 outer 居中， inner平分內部，即每個inner占用 1/7 = 14.2%。內部原點span和文字通過每個inner的text-align:center;居中。
接下來就連線線hr的寬度的計算就成了問題。比如連線線hr的起始位置怎麼計算？inner的1/2，也就是1/14=0.071？
第一次inner的1/7就有省略小數點的誤差，再一半肯定更有誤差，hr的寬度會再乘以2，乘以3，誤差會更大，很有可能出現下面的情況:
第二種方案：
要解決節點span長度計算的問題，就必須讓其乘以的倍數是精確可計算的。於是：
通過外層outer實現居中，inner＋左側等寬的空白 平分內部寬度，即 1/8=12.5%。
這裡又來了另乙個問題：如何使下方文字左移自身寬度一半？
父元素設定 text-align: center; ？？ 不行，我們的圓點span只能從最左邊開始。
自身position: absolute; left: 50%; margin-left: -寬度？不行，自身寬度不知道，變化的。
position: relative; left: -50%？不行，left 百分比是以最近已定位父元素的寬度為參照。
最後解決辦法是，增加一層父元素，使父元素寬度為自身寬度。這樣left百分比就可以相當於以自身寬度。
最後的效果：
由於是跨部門合作，對方返回的流程狀態總是在變，從7個變到5個，從5個變到6個。
7個狀態有8個span，這樣 1/8 = 12.5
5個是加3個變8，也是12.5。通過margin-left微調。
6個同理，加2變8，通過margin-left微調。
自適應視窗元件
發現自帶的沒有這個元件自己就寫了乙個簡單的，後來才發現第三方有寫這個，看來是白寫了，下邊開源下原始碼 resizewindow.mxml是flex的元件介面直接用就可以了。如果想擴充套件的可以自己擴充套件下 支援拖拉，大小拖動 resizewindow.mxml resizewindow.as pa...
uniapp swiper元件高度自適應問題
場景 解決計算出內容高度height，然後使用動態繫結style的方式將內容高度重新複製給swiper元件。由於我的swiper內容區包含資源，資源沒有載入完導致內容區高度計算出錯，所以我將高度計算放在資源載入完成後 swiper indicator dots indicatordots circu...
Process元件的使用
using system using system.diagnostics using system.windows.forms namespace process元件 private void form1 load object sender,eventargs e private void bu...