用WeX5製作流程圖

先看下效果圖

可實現的功能：
1.流程節點可以動態生成，並自適應佈局，4個流程節點則每個節點width=25%,3個接的則每個節點的width=33%
2.根據當前節點則分別顯示爲綠色和灰色；
製作步驟：
1。綁定規則配置
其中list1控件的class設置爲steps；流程名稱動態綁定是設置bind-text；是否顯示爲灰色是設置bind-css；每個節點佔據的位置比例是設置bind-style屬性

2。js代碼
頁面初始化的時候根據接受參數對數據賦值，頁面由於綁定了相關屬性會自動展現相應的樣式。
參數主要有三個，一個是當前節點數fnode，此值決定了哪些是已完成節點（顯示爲綠色），哪些是未完成節點（顯示爲灰色）；
節點總數fcount，根據此參數，前端會計算出每個節點佔據的位置；
項目節點數組，類型爲json，其中fid是節點序號，fname爲節點名稱

//初始化
    Model.prototype.modelParamsReceive = function(event){
        var fnode = 2;//當前節點
        var fcount = 4;//節點總個數
        var fpercent = 25;//每個節點佔據屏幕的比例%
        var rows = [
               {fid:1,fname:"調研"},
               {fid:2,fname:"設計"},
               {fid:3,fname:"實施"},
               {fid:4,fname:"驗收"}
        ];
        if(event.params.data && event.params.data.fnode){
            fnode = event.params.data.fnode;
        }
        if(event.params.data && event.params.data.fcount){
            fcount = event.params.data.fcount;
        }
        if(event.params.data && event.params.data.rows){
            rows = event.params.data.rows;
        }       
        this.comp("pData").setValue('fnode', fnode);
        this.comp("pData").setValue('fcount', fcount);
        if(fcount > 0){
            fpercent = Math.round(100/fcount);
        }   
        this.comp("pData").setValue('fpercent', fpercent);
        this.comp('mainData').newData({defaultValues:rows});
    };

3。樣式設計
樣式代碼來源於百度搜索，感謝原作者的無私奉獻，找過幾種樣式，感覺這種最好，非常簡潔輕量，純css，自適應效果很好

/*步驟流程圖-開始*/
.steps {
  position: relative;
  margin-bottom: 30px;
  counter-reset: step;  /*創建步驟數字計數器*/
}
/*步驟描述*/
.steps li {
  list-style-type: none;
  font-size: 12px;
  text-align: center;
/*  width: 25%;  */
  position: relative;
  float: left;
}
/*步驟數字*/
.steps li:before {
  display: block;
  content:counter(step) ; /*設定計數器內容*/
  counter-increment: step;  /*計數器值遞增*/
  width: 32px;
  height: 32px;
  background-color: #019875;
  line-height: 32px;
  border-radius: 32px;
  font-size: 16px;
  color: #fff;
  text-align: center;
  font-weight: 700;
  margin: 0 auto 8px auto;
}
/*連接線*/
.steps li ~ li:after {
  content: '';
  width: 100%;
  height: 2px;
  background-color: #019875;
  position: absolute;
  left: -50%;
  top: 15px;
  z-index: -1; /*放置在數字後面*/
}
/*將當前/完成步驟之前的數字及連接線變綠*/
.steps li.active:before,
.steps li.active:after {
  background-color: #019875;
}
/*將當前/完成步驟之後的數字及連接線變灰*/
.steps li.active ~ li:before,
.steps li.active ~ li:after {
  background-color: #777;
}
/*步驟流程圖-完*/

小結：應充分利用WeX5平臺提供的數據綁定方法，通過data數據組件綁定可視控件來實現頁面的動態展現