医疗小程序10预约挂号日历切换

1 日期选择组件

1.1 页面效果

预约挂号第一个要实现的效果是日期切换，打开页面的时候可以看到最近七天的挂号情况，选中一个日期的时候有切换的效果

我们先创建一个日期选择页面

1.2 创建变量

要实现这个切换效果，我们先定义一组数据。在代码区点击点击新建，创建一个自定义变量

输入变量的名称，类型选择数组

默认值输入如下

bash 复制代码

[
  {
    "date": "11-19",
    "label": "今日",
    "hasSlot": "有号",
    "select": true,
    "id": 1
  },
  {
    "date": "11-20",
    "label": "周四",
    "hasSlot": "有号",
    "select": false,
    "id": 2
  },
  {
    "date": "11-21",
    "label": "周五",
    "hasSlot": "有号",
    "select": false,
    "id": 3
  },
  {
    "date": "11-22",
    "label": "周六",
    "hasSlot": "有号",
    "select": false,
    "id": 4
  },
  {
    "date": "11-23",
    "label": "周日",
    "hasSlot": "有号",
    "select": false,
    "id": 5
  },
  {
    "date": "11-24",
    "label": "周一",
    "hasSlot": "有号",
    "select": false,
    "id": 6
  },
  {
    "date": "11-25",
    "label": "周二",
    "hasSlot": "有号",
    "select": false,
    "id": 7
  }
]

1.3 搭建布局

变量创建好了之后，我们就可以搭建布局了。因为日历提供了最近7天选择，所以需要有横向滚动条来拉动显示。在列里添加一个滚动容器，设置允许横向滚动

滚动容器里添加普通容器

里边添加循环展示组件

将循环展示的数据属性绑定为我们定义的变量

调整循环展示里边的布局，按照我们数据结构，显示星期、日期和号段状态

依次给文本组件绑定属性

给循环展示外层的普通容器设置宽，布局设置为横向排列。当你设置的宽度超过滚动容器的默认宽度就会出现滚动条。

设置循环展示里边的普通容器，设置宽和默认的背景色

1.4 设置选中效果

当日期被选中时，我们需要让容器的背景色改变，文字的颜色改变。需要重置我们数组中的select属性，选中的元素设置为true，其余的设置为false。为此需要创建一个javascript代码

输入如下代码

bash 复制代码

export default function({ event, data }) {
  const id = data.target;
  const list = $w.page.dataset.state.canSelectDate || [];
  // 遍历一次：命中项 select=true，其余 false
  list.forEach(item => item.select = (item.id == id));
  // 通知前端刷新（低代码平台需要手动 setData）
  $w.page.dataset.state.canSelectDate = [...list];
}

给普通容器设置点击事件，调用我们的方法，并且传入当前元素的id

然后给普通容器绑定style属性

bash 复制代码

$w.item_repeater1.select?{background:"#EDF5FF"}:{}

给内层的普通容器绑定一个深蓝色的背景

其余文本也按照同样的方式绑定，就实现了选中之后文本高亮的效果

最终效果

当进入页面的时候，今日选项默认选中

可以切换到其他日期

总结

本篇我们介绍了挂号场景的第一个组件效果，日期切换。思路是利用预定义的数据结构，结合滚动容器、循环展示、样式绑定等，结合自定义代码来重设选中未选中进行效果切换。因为低代码是纯靠组件实现，不像纯代码可以直接操作dom，是需要进行一番思考的。

医疗小程序10预约挂号日历切换

目录

1 日期选择组件

1.1 页面效果

1.2 创建变量

1.3 搭建布局

1.4 设置选中效果

最终效果

总结