微信小程式實現流程進度功能

2021-08-15 11:06:27 字數 1551 閱讀 7757

需求:

沒完成的灰色小圓點表示

完成的使用藍色小圓點設定

當前狀態使用有外圈的小圓點表示

實現起來比較簡單,實現思路,使用乙個列表實現,列表中的每乙個item的樣式如下圖

使用win10畫板畫的不好看

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

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

class='order_process'>

class='process_wrap'

wx:for="

}"wx:key="">

class='process'>

class='process_line'

style="background:

}">

view>

class='process_icon'

src="

}">

image>

class='process_line'

style="background:

}">

view>

view>

class='process_name'>

}text>

view>

view>

ok 列表肯定需要乙個陣列啦陣列如下面

processdata: [,,,

,],

},

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

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

當資料改變的時候,我們只需要改變陣列中物件的屬性就好了。不如下面的做參考

//進度條的狀態

setpeocessicon: function () else

}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()

},

上面**的資料中,使用state代表完成和沒完成。我們把完成的設定為藍色 把沒完成的設定為灰色。

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

最後css中的**也很簡單

.order_process 

.process_wrap

.process

.process_icon

.process_line

.process_name

php實現微信小程式授權登入功能 實現流程

先上圖 實現流程 1 授權登陸按鈕和正文資訊放到了同乙個頁面,未授權的時候顯示登陸按鈕,已授權的時候隱藏登陸按鈕,顯示正文資訊,當然也可以授權和正文分開成兩個頁面,在授權頁面的onload裡判斷是否已授權,若已授權就直接跳轉正文的頁面。這裡只說授權按鈕和正文在同一頁面的情況。2 在onload裡先判...

微信小程式留言功能實現

index.wxml bindtap llzanchange view class zhegai hide bindtap llbquxiao view view class liuyanban hide view class view textarea class shuruk value bin...

微信小程式微信支付流程

1.小程式呼叫wx.login獲取登入憑證code wx.login 無請求引數 返回code 有效期5分鐘 wx.login 2.小程式通過code獲取openid 向介面位址 請求引數 返回引數 openid 使用者唯一標識 session key 回話金鑰 3.小程式向服務端傳送openid,...