小程序 自定义 时间轴组件

image.png

新鲜出炉 自定义时间轴组件 拿过去用吧！
timeAxis.js

Component({
  options: {
    multipleSlots: true
  },

  properties: {
    isCurent:{
      type: Boolean,
      value: false
    },
    isShowLeftLine: {
      type: Boolean,
      value: true
    },
    axisTitle: {
      type: String,
      value: ''
    },
    axisTime:{
      type: String,
      value: ''
    },
    textArray:{
      type: Array,
      value:[]
    }

  },

  data: {
   
  },
  ready() {
    console.log(  this.data.textArray)
  },

  methods: {

  }
})

timeAxis.wxml

<view class='itemTimeZ'>
 <!--  左边 -->
<view class='leftView'>
<view class='{{isCurent===true?"roundVIew":"outRoundVIew"}}'></view>
<view wx:if="{{isShowLeftLine}}" class='leftLine'>
</view>
</view>

<!-- 右边 -->
<view class='rightContent'>
  <slot name="rightChilren"></slot>
<block wx:if="{{textArray.length>0}}">
  <text wx:for="{{textArray}}" wx:key="unique" class='{{isCurent === true? "curentTitle" : "outTitle"}}'>{{item}}</text>
</block>
  <text wx:if="{{axisTitle!=''}}" class='{{isCurent === true? "curentTitle" : "outTitle"}}'>{{axisTitle}}</text>
  <text class='{{isCurent === true? "curentTime" : "outTime"}}'>{{axisTime}}</text>
</view>



</view>

timeAxis.wxss

.itemTimeZ{
  display: flex;
  flex:1;
  padding:0px 15px 0 15px;
}
.leftView{
  display: flex;
  flex-direction: column;
 

  
}
.roundVIew{
  width: 9px;
  height: 9px;
  border-radius: 4.5px;
  background: red;
}
.outRoundVIew{
  width: 9px;
  height: 9px;
  border-radius: 4.5px;
  background: #999;
}
.leftLine{
  display: flex;
  flex: 1;
  width: 1px;
  margin-left: 3.5px;
  padding-bottom: 6px;
  background: #DADADA;
}

.rightContent{
  display: flex;
  flex:1;
  flex-direction: column;
  margin-top: -6px;
  margin-left: 15px;
  padding-bottom: 24px;

}

.curentTitle{
  font-size: 16px;
  line-height: 22.5px;
  color:#fe473c
}
.curentTime{
  font-size: 14px;
  color:#fe473c
}
.outTitle{
  font-size: 16px;
    line-height: 22.5px;
  color:#999
}
.outTime{
  font-size: 14px;
  color:#999
}

用法：

<view class='timeAxisView'> 
<timeAxis isCurent="{{true}}" axisTitle="取消退货" axisTime="2019-05-21 21:09:09"/>
<timeAxis axisTitle="买家修改申请" axisTime="2019-05-21 21:09:09"/>
<timeAxis textArray="{{textArray}}" axisTime="2019-05-21 21:09:09"/>
<timeAxis axisTitle="买家修改退货" axisTime="2019-05-21 21:09:09" isShowLeftLine="{{false}}"/>
</view>

转载于:https://www.jianshu.com/p/a60e01b4a124