本文小編為大家詳細(xì)介紹“微信小程序怎么實(shí)現(xiàn)流程進(jìn)度的圖樣式功能”,內(nèi)容詳細(xì),步驟清晰,細(xì)節(jié)處理妥當(dāng),希望這篇“微信小程序怎么實(shí)現(xiàn)流程進(jìn)度的圖樣式功能”文章能幫助大家解決疑惑,下面跟著小編的思路慢慢深入,一起來(lái)學(xué)習(xí)新知識(shí)吧。
蓬萊網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián)公司,蓬萊網(wǎng)站設(shè)計(jì)制作,有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為蓬萊成百上千家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)網(wǎng)站建設(shè)要多少錢,請(qǐng)找那個(gè)售后服務(wù)好的蓬萊做網(wǎng)站的公司定做!實(shí)現(xiàn)一個(gè)流程進(jìn)度的圖樣式如下面
需求:
沒(méi)完成的灰色小圓點(diǎn)表示
完成的使用藍(lán)色小圓點(diǎn)設(shè)置
當(dāng)前狀態(tài)使用有外圈的小圓點(diǎn)表示
實(shí)現(xiàn)起來(lái)比較簡(jiǎn)單,實(shí)現(xiàn)思路,使用一個(gè)列表實(shí)現(xiàn),列表中的每一個(gè)item的樣式如下圖
使用win10畫(huà)板畫(huà)的不好看
圖上的意思就是每個(gè)item 前面有一段線條 中間是個(gè)圓圈然后后面有一段線條。之所以這樣是因?yàn)橄旅娴奈淖中枰又酗@示在圓圈的下面。如果不需要文字的話可以一個(gè)圓圈后面跟一條直線會(huì)更簡(jiǎn)單一點(diǎn)。
按照上面的圖片,html布局為下面
<view class='order_process'> <view class='process_wrap' wx:for="{{processData}}" wx:key=""> <view class='process'> <view class='process_line' ></view> <image class='process_icon' src="{{item.icon}}"></image> <view class='process_line' ></view> </view> <text class='process_name'>{{item.name}}</text> </view> </view>
OK 列表肯定需要一個(gè)數(shù)組啦數(shù)組如下面
processData: [{ name: '提交工單', start: '#fff', end: '#EFF3F6', icon: '../../img/process_1.png' }, { name: '已接單', start: '#EFF3F6', end: '#EFF3F6', icon: '../../img/process_1.png' }, { name: '開(kāi)始維修', start: '#EFF3F6', end: '#EFF3F6', icon: '../../img/process_1.png' }, { name: '維修結(jié)束', start: '#EFF3F6', end: '#EFF3F6', icon: '../../img/process_1.png' }, { name: '已確認(rèn)', start: '#EFF3F6', end: '#fff', icon: '../../img/process_1.png' }], },
按照上面的item圖片我們會(huì)看到直接顯示的話兩邊會(huì)多處一條線來(lái)怎么去掉這兩條線呢,很簡(jiǎn)單,讓父容器的背景顏色跟先的顏色一樣就好啦。
把父布局的背景改為白色,然后控制列表中第一個(gè)item中的前面的線段的顏色為白色,最后一個(gè)item中的后面的線段為白色。這樣看起來(lái)兩邊的線段就去掉了
當(dāng)數(shù)據(jù)改變的時(shí)候,我們只需要改變數(shù)組中對(duì)象的屬性就好了。不如下面的做參考
//進(jìn)度條的狀態(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ù)據(jù)中,使用state代表完成和沒(méi)完成。我們把完成的設(shè)置為藍(lán)色 把沒(méi)完成的設(shè)置為灰色。
使用 index 來(lái)記錄是不是當(dāng)前點(diǎn)(當(dāng)前點(diǎn)就是state表示完成的最后一個(gè))。
最后css中的代碼也很簡(jiǎn)單
.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; }
讀到這里,這篇“微信小程序怎么實(shí)現(xiàn)流程進(jìn)度的圖樣式功能”文章已經(jīng)介紹完畢,想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì),如果想了解更多相關(guān)內(nèi)容的文章,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
新聞名稱:微信小程序怎么實(shí)現(xiàn)流程進(jìn)度的圖樣式功能-創(chuàng)新互聯(lián)
網(wǎng)站網(wǎng)址:http://bm7419.com/article40/dsesho.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供品牌網(wǎng)站設(shè)計(jì)、App開(kāi)發(fā)、網(wǎng)頁(yè)設(shè)計(jì)公司、品牌網(wǎng)站建設(shè)、企業(yè)建站、服務(wù)器托管
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容