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

微信小程序?qū)崿F(xiàn)水平時(shí)間軸

 更新時(shí)間:2022年05月22日 16:14:20   作者:gyuei  
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)水平時(shí)間軸,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

本文實(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)代碼

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

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

    原生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-08
  • JavaScript?防抖debounce與節(jié)流thorttle

    JavaScript?防抖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è)面

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

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

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

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

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

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

    require.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-07
  • TypeScript?類(lèi)型斷言的幾種實(shí)現(xiàn)

    TypeScript?類(lèi)型斷言的幾種實(shí)現(xiàn)

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

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

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

    js中遍歷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

最新評(píng)論