vue移动端日期切换调用接口 (前一天后一天)

奋斗吧

擅长邻域：未填写

标签： vue移动端日期切换调用接口 (前一天后一天) Vue.js博客 51CTO博客

2023-04-07 18:23:54 133浏览

vue移动端日期切换调用接口 (前一天后一天)，vue移动端日期切换调用接口(前一天后一天)

network中通过点击去筛选日期对应内容

vue移动端日期切换调用接口 (前一天后一天)_css

vue移动端日期切换调用接口 (前一天后一天)_List_02

效果图

vue移动端日期切换调用接口 (前一天后一天)_当前日期_03

这两个方法分别用于将日期减少一天和增加一天。在 previousDay 方法中，首先创建一个新的 Date 对象 prevDate，它的初始值为当前日期。然后使用 setDate 方法将 prevDate 的日期减少一天。接下来，更新当前日期为 prevDate，并使用 moment.js 库将格式化后的日期转换为 'YYYY-MM-DD' 格式。最后，重置一些变量并调用 loadData 方法加载数据。在 nextDay 方法中，操作与 previousDay 类似，只是将日期增加了一天而不是减少一天。

html

<div class="date" id="xhuaed1">
  <img @click="previousDay" class="pre" src="/img/uaed/pre.png" alt="">
  <span>{{ formattedDate }}</span>
  <img @click="nextDay" class="next" src="/img/uaed/next.png" alt="">
</div>

css

.date{
padding: 32px 0;
display: flex;
width: 100%;
justify-content: space-around;
align-items: center;
img{
 width: 48px;
 height: 48px;
}
span{
font-size: 36px;
font-weight: 400;
color: #FFFFFF;
letter-spacing: 6px;
}
.pre{
}
}

js （安装包moment）import moment from 'moment'

data(){
 
 date: new Date(),
 }
 computed: {

formattedDate() {
  const year = this.date.getFullYear();
  const month = this.date.getMonth() + 1;
  const day = this.date.getDate();
  return `${year}年${month}月${day}日`;
},
},
method(){
previousDay() {
  const prevDate = new Date(this.date);
  prevDate.setDate(prevDate.getDate() - 1);
  this.date = prevDate;
  const date = moment(this.formattedDate, 'YYYY年M月D日').format('YYYY-MM-DD');
  // console.log(date);
  this.dataList = []
  this.page = 0
  this.total = 0
  this.isFirst = true
  this.finished = false
  this.skeletonLoading = true
  this.loadData(date)
  this.skeletonLoading = false
},
nextDay() {
  const nextDate = new Date(this.date);
  nextDate.setDate(nextDate.getDate() + 1);
  this.date = nextDate;
  const date = moment(this.formattedDate, 'YYYY年M月D日').format('YYYY-MM-DD');
  // console.log(date);
  this.dataList = []
  this.page = 0
  this.total = 0
  this.isFirst = true
  this.finished = false
  this.skeletonLoading = true
  this.loadData(date)
  this.skeletonLoading = false
},

async loadData(date) {
  this.loading = true
  let str = 'isPublish:true'+ ',activityLabel:' + '16802727213157'
  str += '&sort=seqNo~asc,createTime~desc'
  if (date){
    str += '&date=' + date
  } else{
    str += '&date=' + moment(this.formattedDate, 'YYYY年M月D日').format('YYYY-MM-DD')
  }
  this.$util.showLoading({
    title: '加载中...',
    // duration: 0
  })
  this.$api.activity.getActivityList(str, this.page, 20).then((res) => {
    this.total = res.totalPages
    res.content.forEach(async item => {
      item.coverPic = this.getImgUrl(item.coverPic, 750, 750)
      // item.holdStartDate = moment(item.holdStartDate).format('YYYY/MM/DD')
      // item = this.convertActivity(item)
      item.holdDate = item.holdStartDate === item.holdEndDate ? item.holdStartDate : item.holdStartDate + ' ~ ' + item.holdEndDate
    })
  this.dataList = res.content

  // console.log(this.dataList,'this.dataList');
    this.isFirst = false
    this.finished = (this.page !== 0 && this.page >= this.total + 1) || (res.content.length < this.size)
    // this.setShare()
    this.$util.closeLoading()
  })
},
}

好博客就要一起分享哦！分享海报

此处可发布评论

评论（0）展开评论

暂无评论，快来写一下吧

展开评论

您可能感兴趣的博客