微信小程序?qū)崿F(xiàn)水平時間軸
更新時間:2022年05月22日 16:14:20 作者:gyuei
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)水平時間軸,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了微信小程序?qū)崿F(xiàn)水平時間軸的具體代碼,供大家參考,具體內(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)費用</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; ?} ?/*圓點背景色變?yōu)樗{(lán)色****** */ ?.dotActive{ ? background: #2ea7e0; ?} ?.line-name{ ? font-size:30rpx; ?}
Js部分代碼如下所示:
// pages/market/detail/detail.js Page({ ? /** ?1. 頁面的初始數(shù)據(jù) ? ?*/ ? data: { ? ? axis:[ ? ? ? { ? ? ? ? name:'待成交', ? ? ? star:'none', ? ? ? end: '#d5d8dd', ? ? ? }, ? ? ? { ? ? ? ? name: '等待確認(rèn)費用', ? ? ? star:'#d5d8dd', ? ? ? end: '#d5d8dd', ? ? ? }, ? ? ? { ? ? ? ? name: '未付款', ? ? ? star:'#d5d8dd', ? ? ? end: 'none', ? ? ? }, ? ? ?] ? }, ? /** ?2. 生命周期函數(shù)--監(jiān)聽頁面加載 ? ?*/ ? onLoad: function (options) { ? }, ? /** ?3. 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成 ? ?*/ ? onReady: function () { ? }, ? /** ?4. 生命周期函數(shù)--監(jiān)聽頁面顯示 ? ?*/ ? onShow: function () { ? }, ? /** ?5. 生命周期函數(shù)--監(jiān)聽頁面隱藏 ? ?*/ ? onHide: function () { ? }, ? /** ?6. 生命周期函數(shù)--監(jiān)聽頁面卸載 ? ?*/ ? onUnload: function () { ? }, ? /** ?7. 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作 ? ?*/ ? onPullDownRefresh: function () { ? }, ? /** ?8. 頁面上拉觸底事件的處理函數(shù) ? ?*/ ? onReachBottom: function () { ? }, ? /** ?9. 用戶點擊右上角分享 ? ?*/ ? onShareAppMessage: function () { ? } })
最終效果如圖所示:
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
原生JS 實現(xiàn)的input輸入時表格過濾操作示例
這篇文章主要介紹了原生JS 實現(xiàn)的input輸入時表格過濾操作,結(jié)合實例形式分析了JavaScript基于頁面元素遍歷、運算、判斷實現(xiàn)的表格過濾相關(guān)操作技巧,需要的朋友可以參考下2019-08-08JavaScript?防抖debounce與節(jié)流thorttle
這篇文章主要介紹了JavaScript?防抖debounce與節(jié)流thorttle,文章圍繞主題展開詳細(xì)的內(nèi)容介紹,具有一定的參考價值,需要的小伙伴可以參考一下2022-05-05微信小程序?qū)崿F(xiàn)點擊導(dǎo)航條切換頁面
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)點擊導(dǎo)航條切換頁面,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2020-11-11require.js配合插件text.js實現(xiàn)最簡單的單頁應(yīng)用程序
這篇文章主要介紹了require.js配合插件text.js實現(xiàn)最簡單的單頁應(yīng)用程序,需要的朋友可以參考下2016-07-07