我在使用微信云开发的时候,查询数据库没有数据。想要做一个根据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({});
> 你好,你想实现的功能是根据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
```