欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序實現(xiàn)流程進度的圖樣式功能

 更新時間:2018年01月16日 13:37:10   作者:mingyunxiaohai  
最近正在做微信小程序,需要實現(xiàn)一個流程進度的圖樣式,下面小編給大家?guī)砹宋⑿判〕绦驅崿F(xiàn)流程進度的圖樣式功能實例代碼,需要的朋友參考下吧

最近正在做微信小程序,需要實現(xiàn)一個流程進度的圖樣式如下面

這里寫圖片描述 

需求:

  1. 沒完成的灰色小圓點表示
  2. 完成的使用藍色小圓點設置
  3. 當前狀態(tài)使用有外圈的小圓點表示

實現(xiàn)起來比較簡單,實現(xiàn)思路,使用一個列表實現(xiàn),列表中的每一個item的樣式如下圖

這里寫圖片描述 

使用win10畫板畫的不好看

圖上的意思就是每個item 前面有一段線條 中間是個圓圈然后后面有一段線條。之所以這樣是因為下面的文字需要居中顯示在圓圈的下面。如果不需要文字的話可以一個圓圈后面跟一條直線會更簡單一點。

按照上面的圖片,html布局為下面

 <view class='order_process'>
  <view class='process_wrap' wx:for="{{processData}}" wx:key="">
  <view class='process'>
   <view class='process_line' style="background:{{item.start}}"></view>
   <image class='process_icon' src="{{item.icon}}"></image>
   <view class='process_line' style="background:{{item.end}}"></view>
  </view>
  <text class='process_name'>{{item.name}}</text>
  </view>
 </view>

OK 列表肯定需要一個數(shù)組啦數(shù)組如下面

processData: [{
  name: '提交工單',
  start: '#fff',
  end: '#EFF3F6',
  icon: '../../img/process_1.png'
 },
 {
  name: '已接單',
  start: '#EFF3F6',
  end: '#EFF3F6',
  icon: '../../img/process_1.png'
 },
 {
  name: '開始維修',
  start: '#EFF3F6',
  end: '#EFF3F6',
  icon: '../../img/process_1.png'
 },
 {
  name: '維修結束',
  start: '#EFF3F6',
  end: '#EFF3F6',
  icon: '../../img/process_1.png'
 },
 {
  name: '已確認',
  start: '#EFF3F6',
  end: '#fff',
  icon: '../../img/process_1.png'
 }],
 },

按照上面的item圖片我們會看到直接顯示的話兩邊會多處一條線來怎么去掉這兩條線呢,很簡單,讓父容器的背景顏色跟先的顏色一樣就好啦。

把父布局的背景改為白色,然后控制列表中第一個item中的前面的線段的顏色為白色,最后一個item中的后面的線段為白色。這樣看起來兩邊的線段就去掉了

當數(shù)據改變的時候,我們只需要改變數(shù)組中對象的屬性就好了。不如下面的做參考

//進度條的狀態(tài)
 setPeocessIcon: function () {
 var index = 0//記錄狀態(tài)為1的最后的位置
 var processArr = this.data.processData
 // console.log("progress", this.data.detailData.progress)
 for (var i = 0; i < this.data.detailData.progress.length; i++) {
  var item = this.data.detailData.progress[i]
  processArr[i].name = item.word
  if (item.state == 1) {
  index = i
  processArr[i].icon = "../../img/process_3.png"
  processArr[i].start = "#45B2FE"
  processArr[i].end = "#45B2FE"
  } else {
  processArr[i].icon = "../../img/process_1.png"
  processArr[i].start = "#EFF3F6"
  processArr[i].end = "#EFF3F6"
  }
 }
 processArr[index].icon = "../../img/process_2.png"
 processArr[index].end = "#EFF3F6"
 processArr[0].start = "#fff"
 processArr[this.data.detailData.progress.length - 1].end = "#fff"
 this.setData({
  processData: processArr
 })
 },

上面代碼的數(shù)據中,使用state代表完成和沒完成。我們把完成的設置為藍色 把沒完成的設置為灰色。

使用 index 來記錄是不是當前點(當前點就是state表示完成的最后一個)。

最后css中的代碼也很簡單

.order_process {
 display: flex;
 flex-wrap: nowrap;
 padding: 10rpx 10rpx 20rpx 10rpx;
 background-color: #fff;
}

.process_wrap {
 display: flex;
 flex-direction: column;
 flex: 1;
 align-items: center;
}

.process {
 display: flex;
 align-items: center;
 width: 100%;
}

.process_icon {
 width: 50rpx;
 height: 50rpx;
}

.process_line {
 background: #eff3f6;
 flex: 1;
 height: 5rpx;
}

.process_name {
 font-size: 24rpx;
}

總結

以上所述是小編給大家介紹的微信小程序實現(xiàn)流程進度的圖樣式功能,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持!

相關文章

  • HTML+JS實現(xiàn)經典推箱子游戲

    HTML+JS實現(xiàn)經典推箱子游戲

    今天,這篇文章將利用HTML,CSS,JS的知識編寫一個童年經典游戲?-?推箱子,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下
    2022-11-11
  • 對layui中table組件工具欄的使用詳解

    對layui中table組件工具欄的使用詳解

    今天小編就為大家分享一篇對layui中table組件工具欄的使用詳解,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-09-09
  • js 多瀏覽器分別判斷代碼

    js 多瀏覽器分別判斷代碼

    比較實用的多款瀏覽器判斷代碼,需要的朋友可以收集下,適合需要區(qū)別對待不同瀏覽器,執(zhí)行不用的操作的代碼。
    2010-04-04
  • 談談基于iframe、FormData、FileReader三種無刷新上傳文件的方法

    談談基于iframe、FormData、FileReader三種無刷新上傳文件的方法

    發(fā)請求有兩種方式,一種是用ajax,另一種是用form提交,默認的form提交如果不做處理的話,會使頁面重定向。本篇文章通過實例給大家介紹基于iframe/FormData/FileReader三種無刷新上傳文件的方法,感興趣的朋友一起學習吧
    2015-12-12
  • webpack4.x CommonJS模塊化淺析

    webpack4.x CommonJS模塊化淺析

    這篇文章主要介紹了webpack4.x CommonJS模塊化淺析,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-11-11
  • ECMAScript6塊級作用域及新變量聲明(let)

    ECMAScript6塊級作用域及新變量聲明(let)

    這篇文章主要介紹了ECMAScript6塊級作用域及新變量聲明(let) 的相關資料,需要的朋友可以參考下
    2015-06-06
  • JavaScript實現(xiàn)時鐘功能

    JavaScript實現(xiàn)時鐘功能

    這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)時鐘功能,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-06-06
  • D3.js實現(xiàn)繪制和弦圖的教程詳解

    D3.js實現(xiàn)繪制和弦圖的教程詳解

    弦圖,是一種表示實體之間相互關系的圖形方法。這篇文章主要為大家詳細介紹了如何通過D3.js實現(xiàn)繪制和弦圖,文中的示例代碼講解詳細,對我們學習D3.js有一定的幫助,需要的可以參考一下
    2022-11-11
  • 基于webpack.config.js 參數(shù)詳解

    基于webpack.config.js 參數(shù)詳解

    下面小編就為大家分享一篇基于webpack.config.js 參數(shù)詳解,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-03-03
  • JS+CSS實現(xiàn)精美的二級導航效果代碼

    JS+CSS實現(xiàn)精美的二級導航效果代碼

    這篇文章主要介紹了JS+CSS實現(xiàn)精美的二級導航效果代碼,涉及JavaScript基于鼠標事件動態(tài)變換元素樣式的技巧,非常簡單實用,需要的朋友可以參考下
    2015-09-09

最新評論