微信小程序?qū)崿F(xiàn)水平時(shí)間軸
本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)水平時(shí)間軸的具體代碼,供大家參考,具體內(nèi)容如下
1、wxml部分代碼如下:
<view class="wehx-line-box"> ?? ?<view class="weui-flex__item wehx-line-item" wx:for="{{axis}}" wx:key="*this"> ?? ??? ?<view class='line-name'>{{item.name}}</view> ?? ??? ?<view class='weui-cell-list'> ?? ??? ??? ?<view class='line' style="background:{{item.star}}"></view> ?? ??? ??? ?<view class="dot {{item.finished?'dotActive':''}}"></view> ?? ??? ??? ?<view class='line' style="background:{{item.end}}"></view> ?? ??? ?</view> ?? ?</view> </view>
或者:
<view class="wehx-line-box"> ?? ?<view class="weui-flex__item wehx-line-item"> ?? ??? ?<view class='line-name'>待成交</view> ?? ??? ?<view class='weui-cell-list'> ?? ??? ??? ?<view class='line' style="background:none;"></view> ?? ??? ??? ?<view class="dot {{item.finished?'dotActive':''}}"></view> ?? ??? ??? ?<view class='line' style="background:{{item.end}}"></view> ?? ??? ?</view> ?? ?</view> ?? ?<view class="weui-flex__item wehx-line-item"> ?? ??? ?<view class='line-name'>等待確認(rèn)費(fèi)用</view> ?? ??? ?<view class='weui-cell-list'> ?? ??? ??? ?<view class='line' style="background:{{item.star}}"></view> ?? ??? ??? ?<view class="dot {{item.finished?'dotActive':''}}"></view> ?? ??? ??? ?<view class='line' style="background:{{item.end}}"></view> ?? ??? ?</view> ?? ?</view> ?? ?<view class="weui-flex__item wehx-line-item"> ?? ??? ?<view class='line-name'>未付款</view> ?? ??? ?<view class='weui-cell-list'> ?? ??? ??? ?<view class='line' style="background:{{item.star}}"></view> ?? ??? ??? ?<view class="dot {{item.finished?'dotActive':''}}"></view> ?? ??? ??? ?<view class='line' style="background:none;"></view> ?? ??? ?</view> ?? ?</view> </view>
wxss部分代碼如下:
.wehx-line-box{ ? display: flex; ? height: 90rpx; ? border-top: 1rpx dashed #e5e5e5; ? padding: 30rpx 0; } .wehx-line-item{ ? display:flex;flex-direction:column;justify-content:space-between;align-items:center; } .weui-cell-list{ ? display:flex;align-items:center;justify-content:space-between;width:100%; } ?.line{ ?width:43%; ? height:2rpx; ? background: #d5d8dd; ?} ?.dot{ ? border-radius: 50%; ? width: 10px; ? height: 10px; ? margin-right: 4rpx; ? background: #d5d8dd; ?} ?/*圓點(diǎn)背景色變?yōu)樗{(lán)色****** */ ?.dotActive{ ? background: #2ea7e0; ?} ?.line-name{ ? font-size:30rpx; ?}
Js部分代碼如下所示:
// pages/market/detail/detail.js Page({ ? /** ?1. 頁(yè)面的初始數(shù)據(jù) ? ?*/ ? data: { ? ? axis:[ ? ? ? { ? ? ? ? name:'待成交', ? ? ? star:'none', ? ? ? end: '#d5d8dd', ? ? ? }, ? ? ? { ? ? ? ? name: '等待確認(rèn)費(fèi)用', ? ? ? star:'#d5d8dd', ? ? ? end: '#d5d8dd', ? ? ? }, ? ? ? { ? ? ? ? name: '未付款', ? ? ? star:'#d5d8dd', ? ? ? end: 'none', ? ? ? }, ? ? ?] ? }, ? /** ?2. 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載 ? ?*/ ? onLoad: function (options) { ? }, ? /** ?3. 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面初次渲染完成 ? ?*/ ? onReady: function () { ? }, ? /** ?4. 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面顯示 ? ?*/ ? onShow: function () { ? }, ? /** ?5. 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面隱藏 ? ?*/ ? onHide: function () { ? }, ? /** ?6. 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面卸載 ? ?*/ ? onUnload: function () { ? }, ? /** ?7. 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽(tīng)用戶(hù)下拉動(dòng)作 ? ?*/ ? onPullDownRefresh: function () { ? }, ? /** ?8. 頁(yè)面上拉觸底事件的處理函數(shù) ? ?*/ ? onReachBottom: function () { ? }, ? /** ?9. 用戶(hù)點(diǎn)擊右上角分享 ? ?*/ ? onShareAppMessage: function () { ? } })
最終效果如圖所示:
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
原生JS 實(shí)現(xiàn)的input輸入時(shí)表格過(guò)濾操作示例
這篇文章主要介紹了原生JS 實(shí)現(xiàn)的input輸入時(shí)表格過(guò)濾操作,結(jié)合實(shí)例形式分析了JavaScript基于頁(yè)面元素遍歷、運(yùn)算、判斷實(shí)現(xiàn)的表格過(guò)濾相關(guān)操作技巧,需要的朋友可以參考下2019-08-08JavaScript?防抖debounce與節(jié)流thorttle
這篇文章主要介紹了JavaScript?防抖debounce與節(jié)流thorttle,文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,需要的小伙伴可以參考一下2022-05-05微信小程序?qū)崿F(xiàn)點(diǎn)擊導(dǎo)航條切換頁(yè)面
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)點(diǎn)擊導(dǎo)航條切換頁(yè)面,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-11-11Web3.js查詢(xún)以太幣和代幣余額及轉(zhuǎn)賬
這篇文章主要介紹了Web3.js查詢(xún)以太幣和代幣余額以及轉(zhuǎn)賬,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-09-09require.js配合插件text.js實(shí)現(xiàn)最簡(jiǎn)單的單頁(yè)應(yīng)用程序
這篇文章主要介紹了require.js配合插件text.js實(shí)現(xiàn)最簡(jiǎn)單的單頁(yè)應(yīng)用程序,需要的朋友可以參考下2016-07-07TypeScript?類(lèi)型斷言的幾種實(shí)現(xiàn)
本文主要介紹了TypeScript?類(lèi)型斷言的實(shí)現(xiàn),有使用關(guān)鍵字as和標(biāo)簽<>兩種方式,具有一定的參考價(jià)值,感興趣的可以了解一下2024-01-01js中遍歷Map對(duì)象的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇js中遍歷Map對(duì)象的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08