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

微信小程序?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)代碼

    js 文件引入實現(xiàn)代碼

    項目前端的文件和后臺開發(fā)分離,只要后臺開發(fā)更新svn前端的js,css文件都會更新,以前引用的是一個js文件如AA.js,由于想在項目中引用jquery庫,如果在每個文件的頭部都引讓他們從新寫入這個jq文件不太可能
    2010-04-04
  • 原生JS 實現(xiàn)的input輸入時表格過濾操作示例

    原生JS 實現(xiàn)的input輸入時表格過濾操作示例

    這篇文章主要介紹了原生JS 實現(xiàn)的input輸入時表格過濾操作,結(jié)合實例形式分析了JavaScript基于頁面元素遍歷、運算、判斷實現(xiàn)的表格過濾相關(guān)操作技巧,需要的朋友可以參考下
    2019-08-08
  • JavaScript?防抖debounce與節(jié)流thorttle

    JavaScript?防抖debounce與節(jié)流thorttle

    這篇文章主要介紹了JavaScript?防抖debounce與節(jié)流thorttle,文章圍繞主題展開詳細(xì)的內(nèi)容介紹,具有一定的參考價值,需要的小伙伴可以參考一下
    2022-05-05
  • 微信小程序?qū)崿F(xiàn)點擊導(dǎo)航條切換頁面

    微信小程序?qū)崿F(xiàn)點擊導(dǎo)航條切換頁面

    這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)點擊導(dǎo)航條切換頁面,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-11-11
  • JS數(shù)組中對象去重操作示例

    JS數(shù)組中對象去重操作示例

    這篇文章主要介紹了JS數(shù)組中對象去重操作,涉及javascript數(shù)組對象遍歷、比較、運算等相關(guān)操作技巧,需要的朋友可以參考下
    2019-06-06
  • Web3.js查詢以太幣和代幣余額及轉(zhuǎn)賬

    Web3.js查詢以太幣和代幣余額及轉(zhuǎn)賬

    這篇文章主要介紹了Web3.js查詢以太幣和代幣余額以及轉(zhuǎn)賬,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2022-09-09
  • require.js配合插件text.js實現(xiàn)最簡單的單頁應(yīng)用程序

    require.js配合插件text.js實現(xiàn)最簡單的單頁應(yīng)用程序

    這篇文章主要介紹了require.js配合插件text.js實現(xiàn)最簡單的單頁應(yīng)用程序,需要的朋友可以參考下
    2016-07-07
  • TypeScript?類型斷言的幾種實現(xiàn)

    TypeScript?類型斷言的幾種實現(xiàn)

    本文主要介紹了TypeScript?類型斷言的實現(xiàn),有使用關(guān)鍵字as和標(biāo)簽<>兩種方式,具有一定的參考價值,感興趣的可以了解一下
    2024-01-01
  • 微信小程序Vant組件庫的安裝與使用教程

    微信小程序Vant組件庫的安裝與使用教程

    之前推薦過的移動端web組件庫 Vant是Vue.js版本的,其對內(nèi)承載了有贊所有核心業(yè)務(wù),對外有十多萬開發(fā)者在使用,一直是業(yè)界主流的移動端組件庫之一,下面這篇文章主要給大家介紹了關(guān)于微信小程序Vant組件庫的安裝與使用的相關(guān)資料,需要的朋友可以參考下
    2022-09-09
  • js中遍歷Map對象的簡單實例

    js中遍歷Map對象的簡單實例

    下面小編就為大家?guī)硪黄猨s中遍歷Map對象的簡單實例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-08-08

最新評論