我在使用微信云开发的时候，查询数据库没有数据。想要做一个根据tab标签的切换，来显示数据库的course数据。

Question

我在使用微信云开发的时候，查询数据库没有数据。想要做一个根据tab标签的切换，来显示数据库的course数据。

数据库集合TimeTable的JSON数据如下：

```javascript
{"_id":"2cc84e26641d07ed05e217fe50c6d14e","courses":[{"difficulty":"基础","teacher":"沸沸","time":"15:30-16:50","dance":"HIPHOP","day":"周六"},{"time":"17:00-18:20","dance":"HIPHOP","day":"周六","difficulty":"提高","teacher":"沸沸"},{"teacher":"毛毛","time":"18:30-19:50","dance":"HIPHOP","day":"周六","difficulty":"零基础"},{"dance":"HIPHOP","day":"周六","difficulty":"基础","teacher":"毛毛","time":"20:00-21:20"}],"date":"2023年4月1日","numid":1.0}
{"_id":"5bd9b50d641d089b0004eef535d0dbc1","courses":[{"difficulty":"基础","teacher":"BIUBIU","time":"15:30-16:50","dance":"HIPHOP","day":"周日"},{"dance":"HIPHOP","day":"周日","difficulty":"提高","teacher":"BIUBIU","time":"17:00-18:20"},{"teacher":"小撒","time":"18:30-19:50","dance":"Afro","day":"周日","difficulty":"基础"},{"time":"20:00-21:20","dance":"SoulDacne","day":"周日","difficulty":"基础","teacher":"小米"}],"date":"2023年4月2日","numid":2.0}
{"_id":"c6feaf37641d09030000f1ae4f0cbbe6","date":"2023年4月3日","numid":3.0,"courses":[{"day":"周一","difficulty":"基础","teacher":"潇潇","time":"17:00-18:20","dance":"SoulDance"},{"dance":"HIPHOP","day":"周一","difficulty":"基础","teacher":"沸沸","time":"18:30-19:50"},{"dance":"HIPHOP","day":"周一","difficulty":"零基础","teacher":"沸沸","time":"20:00-21:20"}]}
{"_id":"0122a587641d094705e4c2601db9334b","numid":4.0,"courses":[{"dance":"SoulDance","day":"周二","difficulty":"基础","teacher":"潇潇","time":"17:00-18:20"},{"dance":"Afro","day":"周二","difficulty":"基础","teacher":"小撒","time":"18:30-19:50"},{"dance":"HIPHOP","day":"周二","difficulty":"提高","teacher":"BIUBIU","time":"20:00-21:20"}],"date":"2023年4月4日"}
{"_id":"4a11c474641d099d00035b3d10672674","date":"2023年4月5日","numid":5.0,"courses":[{"dance":"HOUSE","day":"周三","difficulty":"基础","teacher":"唐棋","time":"17:00-18:20"},{"dance":"HIPHOP","day":"周三","difficulty":"零基础","teacher":"毛毛","time":"18:30-19:50"},{"time":"20:00-21:20","dance":"HIPHOP","day":"周三","difficulty":"基础","teacher":"毛毛"}]}
{"_id":"8473f6f1641d0a5600029e6a53b69290","courses":[{"day":"周四","difficulty":"训练日","teacher":"BIUBIU","time":"17:00-22:20","dance":"HIPHOP"}],"date":"2023年4月6日","numid":6.0}
{"_id":"69ebed93641d0a650001b45309c2417b","courses":[{"day":"周五","difficulty":"基础","teacher":"唐棋","time":"17:00-18:20","dance":"HOUSE"},{"dance":"HIPHOP","day":"周五","difficulty":"基础","teacher":"BIUBIU","time":"18:30-19:50"},{"difficulty":"基础","teacher":"小米","time":"20:00-21:20","dance":"SoulDacne","day":"周五"}],"date":"2023-04-07","numid":7.0}
{"_id":"5bd9b50d641d0a860005322e496d3f9c","courses":[{"teacher":"唐棋","time":"17:00-18:20","dance":"HOUSE","day":"周五","difficulty":"基础"},{"dance":"HIPHOP","day":"周五","difficulty":"基础","teacher":"BIUBIU","time":"18:30-19:50"},{"teacher":"小米","time":"20:00-21:20","dance":"SoulDacne","day":"周五","difficulty":"基础"}],"date":"2023年4月7日","numid":7.0}
{"_id":"c6feaf37641d0aac0001345456ceec46","date":"2023年4月8日","numid":8.0,"courses":[{"dance":"HIPHOP","day":"周六","difficulty":"基础","teacher":"沸沸","time":"15:30-16:50"},{"dance":"HIPHOP","day":"周六","difficulty":"提高","teacher":"狒狒","time":"17:00-18:20"},{"time":"18:30-19:50","dance":"HIPHOP","day":"周六","difficulty":"零基础","teacher":"毛毛"},{"time":"20:00-21:20","dance":"HIPHOP","day":"周六","difficulty":"基础","teacher":"毛毛"}]}
{"_id":"69ebed93641d0b040001c25d6bc4ae99","courses":[{"dance":"HIPHOP","day":"周日","difficulty":"基础","teacher":"BIUBIU","time":"15:30-16:50"},{"time":"17:00-18:20","dance":"HIPHOP","day":"周日","difficulty":"提高","teacher":"BIUBIU"},{"difficulty":"基础","teacher":"小撒","time":"18:30-19:50","dance":"Afro","day":"周日"},{"dance":"SoulDance","day":"周日","difficulty":"基础","teacher":"小米","time":"20:00-21:20"}],"date":"2023年4月9日","numid":9.0}

wxml代码为：

```javascript
<view>请根据日期选择课程进行预约</view>
<t-tabs defaultValue="{{0}}" theme="card" value="{{value}}" bind:change="onTabsChange">
  <t-tab-panel label="123{{TimeTable[0].day}}" value="0">
    <view>老师：{{TimeTable[0].teacher}}</view>
    <view>舞种：{{TimeTable[0].dance}}</view>
    <view>难度：{{TimeTable[0].difficulty}}</view>
    <view>时间：{{TimeTable[0].time}}</view>
  </t-tab-panel>
  <t-tab-panel label="{{TimeTable[1].day}}" value="1">
    <view>老师：{{TimeTable[1].teacher}}</view>
    <view>舞种：{{TimeTable[1].dance}}</view>
    <view>难度：{{TimeTable[1].difficulty}}</view>
    <view>时间：{{TimeTable[1].time}}</view>
  </t-tab-panel>
  <t-tab-panel label="{{TimeTable[2].day}}" value="2">
    <view>老师：{{TimeTable[2].teacher}}</view>
    <view>舞种：{{TimeTable[2].dance}}</view>
    <view>难度：{{TimeTable[2].difficulty}}</view>
    <view>时间：{{TimeTable[2].time}}</view>
  </t-tab-panel>
  <t-tab-panel label="{{TimeTable[3].day}}" value="3">
    <view>老师：{{TimeTable[3].teacher}}</view>
    <view>舞种：{{TimeTable[3].dance}}</view>
    <view>难度：{{TimeTable[3].difficulty}}</view>
    <view>时间：{{TimeTable[3].time}}</view>
  </t-tab-panel>
</t-tabs>

js代码：

const db = wx.cloud.database()
Page({
  data: {
    value: '0',
    TimeTable1: []
  },
  onTabsChange(e) {
    const numid = e.detail.value + 1
    db.collection('TimeTable').where({
      numid: numid
    }).get({
      success: res => {
        this.setData({
          TimeTable1: res.data[0].courses
        })
      }
    })
    this.setData({
      value: e.detail.value
    })
  },
})


Component({});

Answer 1

> 你好，你想实现的功能是根据tab标签切换来显示不同的数据，那么你需要先查询数据库中的所有数据，然后根据tab标签的切换来显示不同的数据。

下面是一个查询数据库并显示数据的例子：

javascript
Copy code
const db = wx.cloud.database()
const TimeTable = db.collection('TimeTable')

// 查询数据库中所有数据
TimeTable.get().then(res => {
  console.log(res.data)
})

// 根据条件查询数据
TimeTable.where({
  day: '周一'
}).get().then(res => {
  console.log(res.data)
})
你可以根据自己的需求修改查询条件，比如根据星期几来查询、根据日期来查询等。查询到数据之后，你可以将数据渲染到页面上，具体的渲染方法可以根据你使用的框架或者库来决定。

至于如何根据tab标签的切换来显示不同的数据，可以使用事件监听器来实现。比如说你有两个tab标签，分别是“周一”和“周二”，你可以给这两个标签绑定点击事件，当用户点击某个标签时，就触发相应的事件来显示对应的数据。

javascript
Copy code
// 给“周一”标签绑定点击事件
const tabMonday = document.getElementById('tab-monday')
tabMonday.addEventListener('click', () => {
  // 查询并显示星期一的数据
  TimeTable.where({
    day: '周一'
  }).get().then(res => {
    // 将数据渲染到页面上
    renderData(res.data)
  })
})

// 给“周二”标签绑定点击事件
const tabTuesday = document.getElementById('tab-tuesday')
tabTuesday.addEventListener('click', () => {
  // 查询并显示星期二的数据
  TimeTable.where({
    day: '周二'
  }).get().then(res => {
    // 将数据渲染到页面上
    renderData(res.data)
  })
})
当用户点击“周一”标签时，就会查询并显示星期一的数据；当用户点击“周二”标签时，就会查询并显示星期二的数据。你可以根据自己的需求来修改查询条件和渲染方法。
> 
```javascript

```