小程序实现近三天时间导航栏，并根据对应不同信息

25号底片~

已于 2022-10-18 14:56:32 修改

阅读量200

点赞数

分类专栏：微信小程序文章标签：小程序 javascript 前端后端

于 2022-10-18 11:16:17 首次发布

本文链接：https://blog.csdn.net/weixin_46001736/article/details/127384567

版权

微信小程序专栏收录该内容

40 篇文章 0 订阅

订阅专栏

页面实现效果展示：

代码：

wxml

<!--导航条-->
<view class="navbar">
  <text wx:for="{{dayList}}" data-idx="{{index}}" class="item {{currentTab==index ? 'active' : ''}}" wx:key="unique" bindtap="navbarTap">
    {{item.year}}-{{item.month}}-{{item.day}}
  </text>
</view>
<!-- 主体内容 -->
<view class="show-date">
  <text>当前时间：{{nowDate}}</text>
    <!-- 表格 -->
      <view style="padding:15px;">
        <view class="table">
          <view class="table-tr">
            <view class="table-th1">跟进</view>
            <view class="table-th2">客户简称</view>
            <view class="table-th3">取消</view>
            <view class="table-th4">延后</view>
          </view>
         <!-- 根据循环，展示表格数据 -->
          <view class="table-tr" wx:for="{{schedule_item}}" wx:key="unique">
            <view class="table-td1">跟进</view>
            <view class="table-td2">{{item.customer_code}}</view>
            <view class="table-td3">取消</view>
            <view class="table-td4">延后</view>
          </view>
        </view>
      </view>
</view>

wxss

/* 顶部导航栏 */
page {
  display: flex;
  flex-direction: column;
  height: 100%;
}
/* 导航栏横向排列 */
.navbar {
  flex: none;
  display: flex;
  background: #fff;
}
/* 导航栏总样式 */
.navbar .item {
  position: relative;
  flex: auto;
  text-align: center;
  height:60px;
}
/* 选中时字体的颜色改变 */
.navbar .item.active {
  color: #7acfa6;
}
/* 选中时增加横线样式 */
.navbar .item.active:after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4rpx;
  background: #7acfa6;
}

/* 表格样式 */
.table {
  display: table;
  width: 100%;
  border-collapse: collapse;
  box-sizing: border-box;
}
.table-tr {
  display: table-row;
}
.table-th1 {
  width:20%;
  display: table-cell;
  font-weight: bold;
  border: 1rpx solid gray;
  background-color:#8fcabd;
  text-align: center;
  vertical-align: middle;
  padding: 5px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
}
.table-th2 {
  width:40%;
  display: table-cell;
  font-weight: bold;
  border: 1rpx solid gray;
  background-color:#8fcabd;
  text-align: center;
  vertical-align: middle;
  padding: 5px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
}
.table-th3 {
  width:20%;
  display: table-cell;
  font-weight: bold;
  border: 1rpx solid gray;
  background-color:#8fcabd;
  text-align: center;
  vertical-align: middle;
  padding: 5px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
}
.table-th4 {
  width:20%;
  display: table-cell;
  font-weight: bold;
  border: 1rpx solid gray;
  background-color:#8fcabd;
  text-align: center;
  vertical-align: middle;
  padding: 5px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
}
.table-td1{
  width:20%;
  display: table-cell;
  border: 1rpx solid gray;
  text-align: center;
  vertical-align: middle;
  padding: 5px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
}
.table-td2 {
  width:40%;
  display: table-cell;
  border: 1rpx solid gray;
  text-align: center;
  vertical-align: middle;
  padding: 5px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
}
.table-td3 {
  width:20%;
  display: table-cell;
  border: 1rpx solid gray;
  text-align: center;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
}
.table-td4 {
  width:20%;
  display: table-cell;
  border: 1rpx solid gray;
  text-align: center;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
}

const app= getApp()
Page({
  data: {
    dayList: [],
    currentTab: 0,
    nowDate:''
  },
  //顶部菜单
  navbarTap: function (e) {
    this.setData({
      currentTab: e.currentTarget.dataset.idx
    })
//点击顶部栏，出现的下标值作为数组的第几项
    this.setData({
      nowDate:this.data.dayList[e.currentTarget.dataset.idx].year+'-'+this.data.dayList[e.currentTarget.dataset.idx].month+'-'+this.data.dayList[e.currentTarget.dataset.idx].day
    })
//访问服务器，将时间传入后端，以时间作为判断条件去查询
    wx.request({
      url: app.globalData.position + 'Crm/schedule_selcet',
      data: {
        nowDate:this.data.dayList[e.currentTarget.dataset.idx].year+'-'+this.data.dayList[e.currentTarget.dataset.idx].month+'-'+this.data.dayList[e.currentTarget.dataset.idx].day
      },
      header: {
        "Content-Type": "application/x-www-form-urlencoded"
      },
      method: 'POST',
      dataType: 'json',
      success: res => {
//将后端获取的值存入data中
        this.setData({
          schedule_item:res.data
        })
      },
      fail(res) {
        console.log("查询失败")
      }
    })
  },
//页面加载出进行的操作
  onLoad: function () {
    var myDate = new Date(); 
    myDate.toLocaleDateString();//获取当前日期
    var total = 1; // 个数（月份需要+1）
    var dayList = [];
    dayList.push({//将数据插入数组
      'day': myDate.getDate(),
      'month': myDate.getMonth() + total,
      // 'week': toWeekDay(myDate.getDay()),//星期显示
      'year': myDate.getFullYear()
    });
    for (var i = 0; i <2; i++) { //选择显示的天数（i<6就是一周）,这里只显示三天0,1,2，当天，第一条，第二天
      myDate.setDate(myDate.getDate() + total); //自动计算后面的日期
      dayList.push({//将数据插入数组
        'day': myDate.getDate(),
        'month': myDate.getMonth() + total,
        // 'week': toWeekDay(myDate.getDay()),//调用toWeekDay()函数，显示星期
        'year': myDate.getFullYear(),
      });    
    }
  //查询，这里的查询主要是为了默认值使用，0就表示当天的数据
      wx.request({
        url: app.globalData.position + 'Crm/schedule_selcet',
        data: {
          nowDate:dayList[0].year+'-'+dayList[0].month+'-'+dayList[0].day
        },
        header: {
          "Content-Type": "application/x-www-form-urlencoded"
        },
        method: 'POST',
        dataType: 'json',
        success: res => {
          this.setData({
            schedule_item:res.data
          })
        },
        fail(res) {
          console.log("查询失败")
        }
      })

    this.setData({
      dayList: dayList,
      nowDate:dayList[0].year+'-'+dayList[0].month+'-'+dayList[0].day//设置默认值
    });
  }
})
//下面适用于星期的显示
// function toWeekDay(weekDay) { //根据Switch case去传入每周的数据
//   switch (weekDay) {
//     case 1:
//       return '星期一';
//       break;
//     case 2:
//       return '星期二';
//       break;
//     case 3:
//       return '星期三';
//       break;
//     case 4:
//       return '星期四';
//       break;
//     case 5:
//       return '星期五';
//       break;
//     case 6:
//       return '星期六';
//       break;
//     case 0:
//       return '星期日';
//       break;
//     default:
//       break;
//   }
//   return '传入未知参数';
// }

  //排程查询
  public function schedule_selcet()
  {
    $nowDate = input('post.nowDate');//前端得来时间参数
    $arr = date_parse_from_format('Y-m-d', $nowDate); //Y-m-d中-与$nowDate要一致
    $time = mktime(0, 0, 0, $arr['month'], $arr['day'], $arr['year']);//转时间戳
    //根据判断条件进行查询，distinct表示根据'customer_code'字段，让其不存在重复值
    $schedule=DB::table('schedule')->where(['creation_date'=>$time])->distinct('customer_code')->field("customer_code")->select();
    echo json_encode($schedule); //以json格式返回$schedule的值
  }