小程序 自定义(定时)滚动刷新内容-轮播图

有预约消息效果，(41分钟就是Math.floor取整结果) 没有预约消息效果

<!-- 就诊动态 begin-->
  <view class="medical-visits">
    <image src="https://xx/medical-visits.png" class="medical-img"></image>
    // 动态信息用轮播图展示
    <swiper wx:if="{{notifyArr.length > 1}}" 
      autoplay 
      circular 
      vertical 
      interval="10000" 
      display-multiple-items="2" 
      class="medical-scroll">
      <swiper-item class="medical-info" wx:for="{{notifyArr}}" wx:key="index">
        <text class="medical-interval">{{item.interval}}</text>
        <text class="medical-content">{{item.content}}</text>
      </swiper-item>
    </swiper>
    <view wx:elif="{{notifyArr.length == 1}}" class="medical-scroll">
      <view class="medical-info single">
        <text class="medical-interval">{{notifyArr[0].interval}}</text>
        <text class="medical-content">{{notifyArr[0].content}}</text>
      </view>
    </view>
    <view wx:else class="medical-scroll">
      <view class="medical-info single">
        <text class="medical-content">暂无就诊动态</text>
      </view>
    </view>
  </view>
  <!-- 就诊动态 end-->

page({
  data:{
    notifyArr: [], // 就诊动态消息列表
    notifyRefreshTimer: null, // 刷新就诊动态消息列表定时器
  },

/**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    // 每隔3秒刷新一次(根据需求自行设置)
    this.data.notifyRefreshTimer = setInterval(() => {
      this.getNotifyList()
    }, 30000)
  },

/**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    clearInterval(this.data.notifyRefreshTimer)
  },

// 获取就诊动态消息列表
  getNotifyList() {
    $http.request('/api/xxxx', {
      pageNo: 1,
      pageSize: 10
    }, 'GET').then(res => {
      if (res.success) {
        const notifyArr = res.data.data.map(item => {
          const fssj = new Date(item.fssj), 
          now = new Date()
          let interval = now - fssj  // 当前时间 - 预约时间
          if(interval < 60 * 1000) {
            interval = '刚刚'
          } else if(interval < 60 * 60 * 1000) {
            // Math.floor()可以获得一个数的整数部分，而不是四舍五入
            interval = Math.floor(interval / (60 * 1000)) + '分钟前'
          } else if(interval < 24 * 60 * 60 * 1000) {
            interval = Math.floor(interval / (60 * 60 * 1000)) + '小时前'
          } else {
            interval = Math.floor(interval / (24 * 60 * 60 * 1000)) + '天前'
          }
          return {
            content: item.nr,
            interval
          }
        })
        this.setData({
          notifyArr
        })
      } else {
        this.setData({
          notifyArr: []
        })
        wx.showToast({
          title: res.message,
          icon: 'none'
        })
      }
    })
  },
})

.medical-visits{
  background: #FFFFFF;
  border-radius: 10rpx;
  margin: 85rpx 30rpx 0;
  display: flex;
  align-items: center;
  padding: 20rpx 30rpx;
}
.medical-img{
  width: 63rpx;
  height: 66rpx;
  margin-right: 30rpx;
  border-right: 1rpx solid #DCDCDC;
  padding-right: 20rpx;
}

.medical-scroll{
  flex: 1;
  overflow: hidden;
  height: 90rpx;
}
.medical-info{
  height: 45rpx;
  display: flex;
  align-items: center;
}
.medical-info.single {
  height: 90rpx;
}
.medical-interval{
  font-size: 24rpx;
  border-radius: 8rpx;
  background: #FEEBD7;
  color: #FF8A00;
}
.medical-content{
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 26rpx;
  color: #333333;
  padding-left: 20rpx;
}