微信小程序时间轴组件的示例代码

这篇文章主要介绍了微信小程序时间轴组件,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

我这里的标题是小程序的时间组件，其实我这里是将他写成了一个页面，当然，如果你有需求，将其做成一个自定义组件也可以~

这玩意其实没有什么技术难点就是一个小页面，我这里就不赘述了。直接上代码：

Remark.wxml：

     {{item.addtime}}{{item.content}}

Remark.js：

//获取应用实例 const app = getApp(); Page({ /** * 页面的初始数据 */ data: { // 数据列表 newList:[], }, getData:function(){ var self = this; console.log(self.newList); console.log(self.showText); }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { // 监听底部菜单变化 if (typeof this.getTabBar === 'function' && this.getTabBar()) { this.getTabBar().setData({ selected: 1    // 根据tab的索引值设置 }) } var self = this; // 请求后台接口获取随言碎语列表 wx.request({ // 请求连接 url: 'xxxxxxxxxxxxxxxxxxx', // 请求所需要的的参数 data: {}, success(result){ self.newList = result.data; self.setData({ newList:self.newList, showText: self.showText }) } }); }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { } })

remark.json

{ "usingComponents": {}, "navigationBarTitleText": "时间里的-随言碎语" }

Remark.wxss：

/*外部容器*/ .listview-container { margin: 10rpx 10rpx; margin-bottom: 115rpx; } /*行样式*/ .playlog-item { display: flex; } /*时间轴*/ .playlog-item .dotline { width: 35px; position: relative; } /*竖线*/ .playlog-item .dotline .line { width: 1px; height: 100%; background: #ccc; position: absolute; top: 0; left: 15px; } /*圆点*/ .playlog-item .dotline .dot { width: 11px; height: 11px; background: #30ac63; position: absolute; top: 10px; left: 10px; border-radius: 50%; } /*时间戳*/ .playlog-item .dotline .time { width: 100%; position: absolute; margin-top: 30px; z-index: 99; font-size: 12px; color: #777; text-align: center; } /*右侧主体内容*/ .playlog-item .content { width: 100%; display: flex; flex-direction: column; border-bottom: 1px solid #ddd; margin: 3px 0; } /*章节部分*/ .playlog-item .content .chapter { font-size: 30rpx; line-height: 68rpx; color: #444; white-space: normal; padding-right: 10px; } /*课程部分*/ .playlog-item .content .course { font-size: 28rpx; line-height: 56rpx; color: #999; }

最终效果：