微信小程序时间轴（时间线）特效

效果

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;
}

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) {},
})

微信小程序时间轴（时间线）特效相关推荐

微信小程序-时间轴/抽屉展开收起特效
微信小程序项目中用到的时间轴展示和抽屉展开收起特效本篇内容为原创,转载请注明出处. 一.效果图默认为展开状态 --- 左:展开:右:收起二.代码片段: 1.wxml部分 <view c ...
微信小程序时间轴demo_微信小程序近期能力更新时间轴汇总
微信小程序近期能力更新频繁,作为第三方服务商,延誉宝CMS近期的升级也非常频繁.我们简单回顾一下具体时间节点. 几个主要的时间轴如下 2020-07-08 H5 跳转小程序能力公测为满足 H5 和小 ...
android获取小程序音频时长,最新微信小程序获取音频时长与实时获取播放进度...
#微信小程序获取音频时长与实时获取播放进度在小程序官方文档中 audio 注意:1.6.0 版本开始,该组件不再维护.建议使用能力更强的 wx.createInnerAudioContext 接口 ...
微信小程序时间标签与范围联动设计实现
微信小程序时间标签与范围联动设计实现?最近忙于一个有关数据管理的微信小程序开发,遇到了上图情况,虽然很简单,还是整理一下.若有错误,请广大朋友们指正. 使用微信小程序组件radio-group.pic ...
最新微信小程序获取音频时长与实时获取播放进度
#微信小程序获取音频时长与实时获取播放进度在小程序官方文档中 audio 注意:1.6.0 版本开始,该组件不再维护.建议使用能力更强的 wx.createInnerAudioContext 接口 ...
小程序时间轴和地区列表的实现，js+css实现时间轴效果
老规矩先看效果图先来看左图的地区列表是如何实现的. 我们在解析数据之前,要先看下数据结构 [{"_id": "XL28U3kPDdDCJ9m0"," ...
taro微信小程序时间组件picker的使用--省市区三级联动
微信小程序时间组件实现三级联动项目技术手段支撑 taro+react+scss实现的微信小程序 Picker使用说明相信大家在微信小程序开放文档里面已经学会了使用组件picker实现时间,和单列组 ...
php 限制图片大小代码,微信小程序在上传图片时如何限制大小（附代码）
本篇文章给大家带来的内容是关于微信小程序在上传图片时如何限制大小(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 最近有一个微信小程序的项目,要求是上传多张图片,数量不能超过 ...
解决微信小程序反编译时 $gwx is not defined 错误。
因为过节在家编写自己的一个工具小程序,结果上班后发现没有拷贝到U盘上,但是我的微信里预览过开发版,就想反编译获取自己的代码-- 环境 & 工具 win10 + node.js + wxappU ...
微信小程序时间标签和时间范围的联动
最近忙于一个有关数据管理的微信小程序,遇到了上图情况,虽然很简单,还是整理一下.若有错误,请广大朋友们指正. 使用微信小程序组件radio-group.picker,用wxss对radio按照需求进行 ...

微信小程序时间轴（时间线）特效

微信小程序时间轴（时间线）特效相关推荐

最新文章

热门文章

微信小程序 时间轴（时间线）特效

微信小程序 时间轴（时间线）特效相关推荐

最新文章

热门文章

微信小程序时间轴（时间线）特效

微信小程序时间轴（时间线）特效相关推荐