在同一页面我有3个选项卡。
第一个选项卡，我把读取数据库函数放在了onload中，打开即加载（已控制输出记录数）。
但第二个和第三个选项卡（分别读取不同的数据库）怎么才能实现点击切换才加载或者直接都放在onload加载（数据量可能过大）？
js文件
// pages/index2/dataforu/dataforu.js
Page({
/**
* 页面的初始数据
*/
data: {
TabCur: 0,
scrollLeft:0
},
tabSelect(e) {
this.setData({
TabCur: e.currentTarget.dataset.id,
scrollLeft: (e.currentTarget.dataset.id-1)*60
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that = this;//把this对象复制到临时变量that
const wxreq = wx.request({
url: 'https://***/data/glcj.php',
data:{
//id:"1",
//name:'Leanne Graham'
},
success: function (res){
console.log(res.data);
that.userData = res.data; //无效不能实时的渲染到页面
that.setData({ userData: res.data });//和页面进行绑定可以动态的渲染到页面
},
fail: function (res){
console.log(res.data);
this.userData = "数据获取失败";
}
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
return {
title: '数据图表走势',
path: 'pages/index2/dataforu/dataforu',
success: function (res) {
// 转发成功
},
fail: function (res) {
// 转发失败
}
}
},
// 自定义分享朋友圈
onShareTimeline: function() {
return {
title: '数据图表走势',
path: 'pages/index2/dataforu/dataforu',
}
}
})
wxml文件
<!--数据看板-->
<view class="cu-bar bg-white solid-bottom margin-top">
<view class="action">
<text class="cuIcon-title text-orange "></text> 数据看板
</view>
</view>
<scroll-view scroll-x class="bg-white">
<view class="cu-list grid col-red gridBorder">
<view class="cu-item flex-sub {{0==TabCur?'text-orange cur':''}}" bindtap="tabSelect" data-id="{{0}}" style="width:33%; height: 166rpx; display: flex; box-sizing: border-box; left: 0rpx; top: 0rpx">
<view class="cuIcon-hot text-red">
<view class="cu-tag badge">
<block>4.3</block>
</view>
</view>
<text>全国成交</text>
</view>
<view class="cu-item flex-sub {{1==TabCur?'text-orange cur':''}}" bindtap="tabSelect" data-id="{{1}}" style="position: relative; left: 0rpx; top: 0rpx; width: 33%; height: 166rpx; display: flex; box-sizing: border-box">
<view class="cuIcon-hotfill text-red">
<view class="cu-tag badge">
<block>16.2</block>
</view>
</view>
<text>全国库存</text>
</view>
<view class="cu-item flex-sub {{2==TabCur?'text-orange cur':''}}" bindtap="tabSelect" data-id="{{2}}" style="position: relative; left: 0rpx; top: 0rpx; width: 33%; height: 166rpx; display: flex; box-sizing: border-box">
<view class="cuIcon-rankfill text-red">
<view class="cu-tag badge">
<block>325.6</block>
</view>
</view>
<text>杭州成交</text>
</view>
</view>
</scroll-view>
<view class="bg-white padding text-center {{0==TabCur}}" hidden="{{TabCur!='0'}}">
<view class="pageSapce">
<!--表格1-->
<text>全国14日成交数据</text>
<view class="divLine"></view>
<view class="table ">
<view class="tr thColor">
<view class="th">日期</view>
<view class="th ">成交</view>
<view class="th ">五日均价</view>
</view>
<view class="table-wrap">
<block wx:for="{{userData}}" wx:key="index">
<view class="tr">
<view class="td">{{item.date2}}</view>
<view class="td">{{item.glcj}}</view>
<view class="td">{{item.col3}}</view>
</view>
</block>
</view>
</view>
</view>
</view>
<view class="bg-white padding text-center {{1==TabCur}}" hidden="{{TabCur!='1'}}">
库存待开发
</view>
<view class="bg-white padding text-center {{1==TabCur}}" hidden="{{TabCur!='2'}}">
杭州成交
</view>
目前的效果图（第一个选项卡显示，第二、三选项卡求教设置）
你为啥不把请求的那段代码，封装在一个函数里，需要请求的时候直接调用不是很方便吗？