微信小程序之滚动日期选择器

效果图:
在这里插入图片描述
知识点:date是个String类型,所以建议后台实体类用String类型。
在这里插入图片描述
代码:
massage.wxml

<view class="ipt-wrap border-b flex ai-center jc-sb ">
      <view class="flex ai-center">  
        <picker mode="date" value="{{date}}" start="1978-01-01" end="2099-12-31" bindchange="bindDateChange">  
          <view class="picker">  
            <label for="" class="font14">疾控常规收货时间</label> : {{dates}}  
          </view>  
        </picker>  
      </view>  
</view>
<!--start="1978-01-01" end="2099-12-31"显示要开始和结束的时间--> 

massage.wcss

.ipt-wrap{
  min-height: 100rpx;
  line-height: 100rpx;
}
.ipt-wrap label{
  min-width: 120rpx;
}
.icon-youjiantou{
  position: relative;
  top: 1rpx;
}
.textarea{
  height: 100rpx;
}
/*swtich样式-start*/
/*swtich整体大小*/
.wx-switch-input{
  width:82rpx !important;
  height:40rpx !important;
}
/*白色样式(false的样式)*/
.wx-switch-input::before{
  width:80rpx !important;
  height: 36rpx !important;
}
/*绿色样式(true的样式)*/
.wx-switch-input::after{
  width: 40rpx !important;
  height: 36rpx !important;
}
.ipt-wrap:last-child{
  border-bottom:none;
}

massage.js

/**
   * 每个小程序都需要在 app.js 中调用 App 方法注册小程序示例,绑定生命周期回调函数、错误监听和页面不存在监听函数等。
整个小程序只有一个 App 实例,是全部页面共享的。开发者可以通过 getApp 方法获取到全局唯一的 App 示例,获取App上的数据或调用开发者注册在 App 上的函数。
   */
//Page() 函数用来注册一个页面。接受一个 object 参数,其指定页面的初始数据、生命周期函数、事件处理函数等。
const app = getApp();
Page({
  /**
   * data:页面的初始数据
   */
  data: {
    dates: '2008-08-08',//此处赋值了初始化
  },
 
  //  点击日期组件确定事件 
  bindDateChange: function (e) {
    console.log(e.detail.value)
    this.setData({
      dates: e.detail.value//获取了点击时间的数据
    })
  },
 
  getDates: function (e) {
    this.setData({ dates: e.detail.value });
  },
  saveNewAddress: function () {
    var that = this;
    let formValue = {
      values: JSON.stringify({
        dates: that.data.dates,//将获取到的日期数据赋值给formValue
      })
    };
    wx.request({
      url: 'http://127.0.0.1:8080/b/massage',
      header: { 'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8' },
      data: {//发送给后台的数据
        formValue: formValue.values,
      },
      method: 'get',//get为默认方法/POST
      success: function (res) {
        console.log("成功");
        console.log(res);
        var resData = res.data;
        console.log(resData + '+++++++');
        if (resData == "ok") {
          // 这里修改成跳转的页面 
          wx.showToast({
            title: '保存成功',
            icon: 'success',
            duration: 2000,
            success: function () {
              wx.navigateTo({
                url: '/pages/kongbai/kongbai'
              })
            }
          })
        } else {
          wx.showToast({
            title: '保存失败',
            icon: 'none',
            duration: 2000,
          })
        }
      }
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

最后附上项目结构图片:
在这里插入图片描述
后台我是用java写的,工具是IDEA,如果有需要的可以留言,希望能帮到小伙伴。
参照了https://blog.csdn.net/qq_33645229/article/details/82854067此篇文章

猜你喜欢

转载自blog.csdn.net/lq18804095672/article/details/105539721