微信小程序 时间选择器的时间渲染给另一个页面

可以先看看我的时间选择器的页面设计与js逻辑处理，把选择的时间显示在指定的view框中：

https://mp.csdn.net/postedit/98747230

 

一、首先，先上页面展示：

逻辑介绍：

这里有两个接口，首先是在下面这个页面上获取对应的时间数据，点击按钮创建，把时间传给后端

因为后端是一个string类型的字段，所以我们在前定义它，把它以逗号分隔连接起来：

        

第一张图就是逗号分隔连接处理后的js代码，后一张图是之前的代码

传给后端后，数据如下图：

所以的话，我们在另一个页面渲染该数据的话就得处理数据了！！！！！！！

重点来了！！！！！！！！

先上代码：

//渲染数据
  clockData(){
    var _this = this
    wx.request({
      url: 'url page='+this.data.page+'&pagesize=15&self=false'', //url
      method: 'GET', //请求方式
      header: {
        'content-type': 'application/json'
      }, // 设置请求的 header 
      success: function (res) {
//这里可以        console.log(res)查看数据，得到数据在res.data.obj.records里面
        res.data.obj.records.forEach((item, index)=>{ //forEach循环该数据组
          if(item.assignDates == null) {//如果assignDates 日期的字段没有数据，为null
            item.assignDatesList=[]   //把assignDates 给一个空数组，不让它为null
          } else {
            item.assignDatesList = item.assignDates.substring(0, item.assignDates.length - 1).split(",");  //有数据时，把该数据以逗号分隔开来赋值给

//substring(0, item.assignDates.length - 1)是因为多传了一个逗号，所以就判断一下长度减一
          }
        })
        _this.setData({
          clockresult: res.data.obj.records,  //这是把数组里面的数据给了一个定义的变量数组，以便wxml中渲染
          pageData: res.data.obj.pages,   //这是把页数值赋值给变量
        });
      },
      fail: function () {
        app.consoleLog("请求数据失败");
      },
      complete: function () {
      }
    })
  },

wxml页面就可以直接渲染了：

wxss代码：

.clockIn .ma{
  width: 90%;
  display:flex;   //自动换行
  flex-wrap:wrap;  //自动换行
  margin-left: 65rpx;
}
.Databorder{
  margin-left: 10rpx;
  margin-bottom: 9rpx;
  width: 130rpx;
  height: 34rpx;
  border-radius: 17rpx;
  font-size: 22rpx;
  border: 1rpx solid rgb(155, 152, 152);
  color: rgb(151, 148, 148);
  text-align: center;
  line-height: 34rpx;
}

这样就可以得到最开始的页面图上的时间展示了！！！！！！