小程序进阶-日历面板

简介

在开发 小程序过程中,选择日期是我们最常见的一种需求。官方为我们提供了picker组件,从底部弹出日历列表供用户选择,但要满足更加优质的体验要求显然还达不到目标。所以,我这里推荐使用Vant Weapp小程序UI组件。

picker

小程序提供的从底部弹起的滚动选择器。
小程序进阶-日历面板_第1张图片

  • index.wxml示例代码
<view class="section">
  <view class="section__title">日期选择器view>
  <picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">
    <view class="picker">
      当前选择: {{date}}
    view>
  picker>
view>
  • index.js示例代码
Page({
	data: {
		date: '2022-02-2'
	},
	bindDateChange: function(e) {
    console.log('picker发送选择改变,携带值为', e.detail.value)
    this.setData({
      date: e.detail.value
    })
  },
})
  • 运行效果
    小程序进阶-日历面板_第2张图片

Vant Weapp

Vant 是有赞前端团队开源的移动端组件库,于 2017 年开源,已,是业界主流的移动端组件库之一。

Calendar

日历组件用于选择日期或日期区间。

小程序要使用Vant Weapp组件库应该怎么办呢?这里我推荐使用npm安装构建。
搭建npm环境教程
小程序npm支持

npm构建流程

  • 以管理员身份打开cmd命令提示符,然后输入命令到指定目录。

  • 调用 npm init 来初始化 package.json,它是NodeJS 约定的用来存放项目的信息和配置等信息的文件。

  • npm i @vant/weapp -S --production 安装组件小程序进阶-日历面板_第3张图片

  • 修改app.json,将 app.json 中的 “style”: “v2” 去除,小程序的新版基础组件强行加上了许多样式,难以覆盖,不关闭将造成部分组件样式混乱。

  • 修改 project.config.json,使开发者工具可以正确索引到 npm 依赖的位置。
    小程序进阶-日历面板_第4张图片

  • 点击微信开发者工具中的菜单栏:工具 --> 构建 npm
    小程序进阶-日历面板_第5张图片

Canlendar使用范例

  • 在app.json或index.json中引入组件
    "usingComponents": {
      "van-calendar": "@vant/weapp/calendar/index"
       "van-cell": "@vant/weapp/cell/index"
    }
    
  • index.wxml代码片段
    
    
    
  • index.js代码片段
    data: {
        date: '',
        show: false,
      },
    
      onDisplay() {
        this.setData({ show: true });
      },
      onClose() {
        this.setData({ show: false });
      },
      formatDate(date) {
        date = new Date(date);
        return `${date.getMonth() + 1}/${date.getDate()}`;
      },
      onConfirm(event) {
        this.setData({
          show: false,
          date: this.formatDate(event.detail),
        });
      },
    
  • 效果展示

小程序进阶-日历面板_第6张图片

你可能感兴趣的:(小程序,微信,小程序,前端,javascript)