微信小程序Timeline时间线效果实现

微信小程序实现类似elementUI的Timeline时间线效果，自适应页面与文本

wxml代码：

<view class="box"><view wx:for="{{list}}" wx:key="index" class="one"><view class="onedot"></view><view wx:if="{{index!=list.length-1}}" class="oneline"></view><view class="onemain"><view class="onemaintitle">{{item.time}}</view><view class="onemaincon">{{item.con}}</view></view></view>
</view>

wxss代码：

.box {padding: 30rpx;
}
.one {position: relative;padding-bottom: 40rpx;
}
.onedot {left: -2rpx;width: 24rpx;height: 24rpx;position: absolute;background-color: #67c23a;border-radius: 50%;display: flex;justify-content: center;align-items: center;z-index: 1;
}
.oneline {position: absolute;left: 8rpx;height: 100%;border-left: 2px solid #e4e7ed;
}
.onemain {position: relative;padding-left: 56rpx;top: -6rpx;
}
.onemaintitle {margin-bottom: 16rpx;padding-top: 8rpx;color: #909399;line-height: 1;font-size: 26rpx;
}
.onemaincon {color: #303133;
}

js代码：

data: {list: [{time: "2021-02-02 10:30:30",con: "这是主要内容部分"},{time: "2021-02-02 10:30:30",con: "这是主要内容部分这是主要内容部分这是主要内容部分这是主要内容部分这是主要内容部分"},{time: "2021-02-02 10:30:30",con: "这是主要内容部分这是主要内容部分这是主要内容部分这是主要内容部分"}]},

最终效果：

微信小程序Timeline时间线效果实现相关推荐

微信小程序Timeline 时间线
微信小程序Timeline 时间线仿ElementUI的Timeline 时间线,自适应页面与文本效果图: wxml代码: <view class="status-alarm&qu ...
微信小程序-删除时提示是否确定删除
微信小程序-删除时提示是否确定删除效果代码 wx.showModal({content: '确定要删除吗?',success: function (sm) {if (sm.confirm) {// ...
ar 微信小程序_微信小程序可以实现AR效果了
微信小程序可以实现AR效果了金羊网作者:马化展 2019-07-08 金羊网讯记者马化展报道:7月5日,微信宣布微信小程序可实现AR效果了.同日,首个小程序AR动态试妆的美妆品牌小程序正式落 ...
微信小程序轮播图中间变大_微信小程序实现带放大效果的轮播图
本文实例为大家分享了微信小程序实现带放大效果的轮播图,供大家参考,具体内容如下效果如图 WXML WXSS .Carousel{ margin-top: 49px; background-color ...
微信小程序实现城市选择效果(超详细)
直接进入正题首先在项目中同级创建一个components文件夹,在文件夹下创建region-picker文件夹,在该文件夹点击右键新建Component就会创建名为 region-picker.js ...
php文字左右滚动通告,微信小程序左右滚动公告栏效果代码实例
这篇文章主要介绍了微信小程序左右滚动公告栏效果代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下代码如下 {{notice}} x data: ...
微信小程序心形点赞效果
微信小程序心形点赞效果前言准备实现原理布局样式逻辑实现尾巴前言之前写过一篇文章微信小程序Canvas绘图API,简单介绍了下微信小程序(下面统称小程序)Canvas绘图相关API的 ...
服务商模式下微信小程序支付时，一直报“支付验证签名失败”错误的解决办法
在写小程序支付的时候,我是以服务商模式发起的支付,统一下单接口是调用成功的,但是在小程序调起支付的时候就报"支付验证签名失败"的错误. 主要有三个原因: 1.第二次签名用到的tim ...
微信小程序实现点赞气泡效果
微信小程序实现点赞气泡效果先上代码: <view class="listImg"><block wx:for="{{8}}" wx:key= ...

微信小程序Timeline时间线效果实现

微信小程序Timeline时间线效果实现相关推荐

最新文章

热门文章