微信小程序实现时间轴特效

本文实例为大家分享了微信小程序实现时间轴特效的具体代码，供大家参考，具体内容如下

效果

wxml

<view class="timeLine" style=" width: 100%;">
  <view class="on" wx:for="{{array}}" wx:key="Lsh"
    style="background:url('../images/ba.png') repeat-y 28.2% 0;">
    <p class="p" style="background: url('../images/icon.png') no-repeat 100% 0;background-size: 36rpx 36rpx;">
      {{item.CreateTime1}}<text class="text">{{item.CreateTime}}</text></p>
    <label class="con" >由用户<text class="name"> {{item.UserName}} </text>提供，将 ”{{item.text1}}“ 修改为 ”{{item.text2}}“ </label>
  </view>
</view>
<view class="END">
  <view>- THE END -</view>
</view>

wxss

page {
  margin: 0;
  padding: 0;
  background-color: #fff;
}

.timeLine {
  margin: 60rpx  0;
}

.on {
  padding-bottom: 30px;

  display: flex;
  width: 100%;
}

.timeLine view:last-child {
  padding-bottom: 2rpx;
}

.timeLine view:first-child {
  padding-top: 50rpx;
}

.p {
  width: 24%;
  font-size: 32rpx;
  font-weight: 300;
  text-align: right;
  padding-right: 50rpx;
  color: #377FFC;
  
}

.text {
  display: block;
  color: #9BBFFD;
  font-size: 12px;
}

.con {
  display: inline-block;
  padding-left: 30rpx;
  width: calc(100% - 300rpx);
  font-weight: 300;
  font-size: 28rpx;
}
.name{
  font-weight: 400;
}
.END {
  text-align: center;
  font-size: 24rpx;
  color: #999;
  padding: 30rpx 50rpx 30rpx 50rpx;
}

Js

const app = getApp();
Page({
  /**
   * 页面的初始数据
   */
  data: {
    array:[{
    "CreateTime":"2021年03月19日",
    "CreateTime1":"11:24:19",
    "Lsh":"210319112419179022",
    "UserName":"11",
    "test1":"重新佩戴安全带时失去平衡",
    "test2":"重新佩戴安全带时失去平衡"
},{
    "CreateTime":"2021年03月19日",
    "CreateTime1":"11:24:19",
    "Lsh":"210319112419179022",
    "UserName":"11",
    "test1":"重新佩戴安全带时失去平衡",
    "test2":"重新佩戴安全带时失去平衡"
}]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },
})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 微信小程序实现水平时间轴

    微信小程序实现水平时间轴

    本文实例为大家分享了微信小程序实现水平时间轴的具体代码,供大家参考,具体内容如下 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'&g

  • 微信小程序实现时间轴

    微信小程序实现时间轴

    本文实例为大家分享了微信小程序实现时间轴的具体代码,供大家参考,具体内容如下 一.显示样式 二.代码 1.wxml: <view class="header">     <view class="header-left">         <view class="header-left-top">{{selectedDay.year}}/{{selectedDay.month}}/{{selectedDay.

  • 微信小程序时间轴实现方法示例

    微信小程序时间轴实现方法示例

    本文实例讲述了微信小程序时间轴实现方法.分享给大家供大家参考,具体如下: 最近项目需要在页面上做一个时间轴,又是第一次做,而且还是在小程序上,要知道小程序里面没有ol/ul/li,看了好几个例子,最后做出来了,开心呀!如图: 做起来其实很简单:一个时间轴包括一个圆圈(css实现圆圈或者找一个圆圈图片)+一条线(css实现直线或者找一个直线的图片)+内容 来看我的代码(代码很不规范,请忽略): wxml <view class='weui-cell-third'> <view class=

  • 微信小程序实现时间轴特效

    微信小程序实现时间轴特效

    本文实例为大家分享了微信小程序实现时间轴特效的具体代码,供大家参考,具体内容如下 效果 wxml <view class="timeLine" style=" width: 100%;">   <view class="on" wx:for="{{array}}" wx:key="Lsh"     style="background:url('../images/ba.png')

  • 微信小程序日期时间选择器使用方法

    微信小程序日期时间选择器使用方法

    本文实例为大家分享了精确到秒的微信小程序日期时间选择器,供大家参考,具体内容如下 效果图 实现原理 利用微信小程序的picker组件的多列选择器实现! WXML <view class="tui-picker-content"> <view class="tui-picker-name">时间选择器(选择时分)</view> <picker mode="time" value="{{time}}

  • 微信小程序当前时间时段选择器插件使用方法详解

    微信小程序当前时间时段选择器插件使用方法详解

    本文实例为大家分享了微信小程序当前时间时段选择器的实现代码,供大家参考,具体内容如下 DEMO效果图 插件思路 准备工作 获取当前时间,同时获取当前的年.月.日.周几: 创建处理日期数字的函数: 创建格式化日期的函数: 创建获取某月天数的函数: 创建获取季度开始的月份函数. 获取时段 创建获取当天的时段函数: 创建获取本周的时段函数: 创建获取本月的时段函数: 创建获取本季度的时段函数: 创建获取本年的时段函数: 创建自定义时段函数. 准备阶段的JS constructor() { this.n

  • 微信小程序实现吸顶特效

    微信小程序实现吸顶特效

    本文实例为大家分享了微信小程序实现吸顶特效的具体代码,供大家参考,具体内容如下 效果图 wxml代码: <view class="xiding {{oneFixed}}" id="tab"> <van-row custom-class="goods_row" > <van-col span="12" custom-class="title-1"> 食疗方法 </va

  • 微信小程序实现时间预约功能

    微信小程序实现时间预约功能

    一个类似电商的时间预约功能,供大家参考,具体内容如下 1 .概述 我们在学习微信小程序或者做项目时,应该会遇到需要时间预约功能情况,那么这个时间预约功能我们应该怎么编写呢?于是就做了一个类似电商的时间预约功能,觉得有用,就独立出来成了个小插件,今天我们就分享这样的小教程.希望对大家有所帮助. 不多说了,上图来啦! 2. wxml <!--pages/orderTime/index.wxml--> <view class='containt'> <scroll-view cla

  • 微信小程序实现顶部导航特效

    微信小程序实现顶部导航特效

    本文实例为大家分享了微信小程序实现顶部导航的具体代码,供大家参考,具体内容如下 之前Android开发时,顶部导航用到viewPage,微信小程序里想要达到同样的效果,可用swiper来实现,先看效果图 上代码: 1.swiperTab.js Page({ data: { // tab切换 currentTab: 0, }, swichNav: function (e) { console.log(e); var that = this; if (this.data.currentTab ===

  • 微信小程序实现时间进度条功能

    微信小程序实现时间进度条功能

    关于答题类,或者一些游戏环节的小程序需要用到时间进度条,该功能怎么实现?看下面源码 <view class='out' style='margin-top:10px'> <view class='in' style='width:{{progressWidth}}%'></view> </view> <view class='caozuo'> <text>{{progressTime}}秒</text> <text

  • 微信小程序三级联动选择器使用方法

    微信小程序三级联动选择器使用方法

    本文实例为大家分享了微信小程序三级联动选择器的具体代码,供大家参考,具体内容如下 效果图 实现原理 利用微信小程序的picker组件,其中: 1,普通选择器:mode = selector实现一级选择实例: 2,省市区选择器:mode = region实现省市区三级联动: 3, 多列选择器:mode = multiSelector实现二级和三级联动的10以内数字的乘法. WXML <view class="tui-picker-content"> <view clas

  • 微信小程序switch开关选择器使用详解

    微信小程序switch开关选择器使用详解

    本文为大家分享了微信小程序switch开关选择器使用方法,供大家参考,具体内容如下 效果图 WXML <view class="tui-list-box"> <view class="tui-menu-list"> <text>状态:{{isChecked1}}</text> <switch class="tui-fr" checked="{{isChecked1}}" b

随机推荐