快捷導(dǎo)航

微信小程序時間軸組件的示例代碼

更新時間：2022年05月31日 10:35:25 作者：camellia

這篇文章主要介紹了微信小程序時間軸組件,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下

我這里的標(biāo)題是小程序的時間組件，其實我這里是將他寫成了一個頁面，當(dāng)然，如果你有需求，將其做成一個自定義組件也可以~

這玩意其實沒有什么技術(shù)難點(diǎn)就是一個小頁面，我這里就不贅述了。直接上代碼：

Remark.wxml：

<view class="listview-container margin_bottom">
  <block wx:for="{{newList}}" wx:key="index">
    <view class="playlog-item" >
      <view class="dotline">
        <!-- 豎線 -->
        <view class="line"></view>
        <!-- 圓點(diǎn) -->
        <view class="dot"></view>
        <!-- 時間戳 -->
      </view>
      <view class="content">
        <text class="course">{{item.addtime}}</text>
        <text class="chapter">{{item.content}}</text>
      </view>
    </view>
    <!-- 廣告插件 -->
    <!-- <ad unit-id="adunit-5abb45645905fc90" wx:if="{{index % 5 == 4}}"></ad> -->
  </block>
</view>

Remark.js：

//獲取應(yīng)用實例
const app = getApp();
Page({
  
  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {
    // 數(shù)據(jù)列表
    newList:[],
  },
  
  getData:function(){
    var self = this;
    console.log(self.newList);
    console.log(self.showText);
  },
  
  /**
   * 生命周期函數(shù)--監(jiān)聽頁面加載
   */
  onLoad: function (options) {
     
  },
  
  /**
   * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
   */
  onReady: function () {
     
  },
  
  /**
   * 生命周期函數(shù)--監(jiān)聽頁面顯示
   */
  onShow: function () {
// 監(jiān)聽底部菜單變化
    if (typeof this.getTabBar === 'function' &&
      this.getTabBar()) 
    {
      this.getTabBar().setData({
        selected: 1    // 根據(jù)tab的索引值設(shè)置
      })  
    }
    var self = this;
    // 請求后臺接口獲取隨言碎語列表
    wx.request({
      // 請求連接
      url: 'xxxxxxxxxxxxxxxxxxx',
      // 請求所需要的的參數(shù)
      data: {},
      success(result){
        self.newList = result.data;
        self.setData({
          newList:self.newList,
          showText: self.showText
        })
      }
    });
     
  },
  
  /**
   * 生命周期函數(shù)--監(jiān)聽頁面隱藏
   */
  onHide: function () {
  
  },
  
  /**
   * 生命周期函數(shù)--監(jiān)聽頁面卸載
   */
  onUnload: function () {
  
  },
  
  /**
   * 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作
   */
  onPullDownRefresh: function () {
  
  },
  
  /**
   * 頁面上拉觸底事件的處理函數(shù)
   */
  onReachBottom: function () {
  
  },
  
  /**
   * 用戶點(diǎn)擊右上角分享
   */
  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; 
}
  
/*圓點(diǎn)*/
.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;
}
  
/*右側(cè)主體內(nèi)容*/
.playlog-item .content {
  width: 100%;
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid #ddd;
  margin: 3px 0;
}
  
/*章節(jié)部分*/
.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;
}

最終效果：