|
|
@@ -11,11 +11,26 @@ Component({
|
|
|
* 组件的初始数据
|
|
|
*/
|
|
|
data: {
|
|
|
+ //屏幕高度
|
|
|
+ statusBarHeight: 0, // 状态栏高度
|
|
|
+ screenHeight: 0, // 屏幕高度
|
|
|
+ customHeight: 0, // 自定义导航栏高度（如小程序右上角胶囊按钮）
|
|
|
+ bottomNavHeight: 0, // 底部导航栏高度
|
|
|
+ contentHeight: 0, // 可用内容高度
|
|
|
+ //
|
|
|
+ showNav: false, // 控制导航栏的显示与隐藏
|
|
|
+ scrollTop: 0, // 当前滚动位置
|
|
|
// 轮播图数组
|
|
|
imageUrls: ['https://tse4-mm.cn.bing.net/th/id/OIP-C.3r1vguZyWFUJ80A2Nf2k3AHaEK?rs=1&pid=ImgDetMain', 'https://ts1.cn.mm.bing.net/th/id/R-C.9881613a29f26488b40938427aa585e4?rik=fim4XvDejjHE%2fQ&riu=http%3a%2f%2fn.sinaimg.cn%2fsinakd20220516ac%2f797%2fw2048h1149%2f20220516%2fb0aa-5aca29fe2dfa69c385118bbc74d039de.jpg&ehk=tzq%2bJP6uMipI0aIHY3bMSVO7lS7ZQM6TKMlwZ5CFP4s%3d&risl=&pid=ImgRaw&r=0', 'https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg', 'https://desk-fd.zol-img.com.cn/t_s960x600c5/g5/M00/02/04/ChMkJ1bKyEyIMaKUAAhskHwWGqUAALIAAM2KsIACGyo249.jpg'],
|
|
|
index: 1,
|
|
|
//卡片数组
|
|
|
- cardarr:[1,2,3,4,5,6,7]
|
|
|
+ cardarr: [1, 2, 3, 4, 5, 6, 7],
|
|
|
+ //日历
|
|
|
+ date_start: '',
|
|
|
+ date_end:'',
|
|
|
+ week_start:'',
|
|
|
+ week_end:'',
|
|
|
+ show: false,
|
|
|
},
|
|
|
lifetimes: {
|
|
|
|
|
|
@@ -24,18 +39,68 @@ Component({
|
|
|
},
|
|
|
attached: async function () {
|
|
|
// 在组件实例进入页面节点树时执行
|
|
|
+ // 计算
|
|
|
+ const systemInfo = wx.getSystemInfoSync();
|
|
|
+ const statusBarHeight = systemInfo.statusBarHeight || 0;
|
|
|
+ const screenHeight = systemInfo.screenHeight || 0;
|
|
|
+ const custom = wx.getMenuButtonBoundingClientRect();
|
|
|
+ const customHeight = custom.height + 10 + 2 || 0;
|
|
|
+ const bottomNavHeight = systemInfo.screenHeight - systemInfo.safeArea.bottom || 0;
|
|
|
+
|
|
|
+ const contentHeight = (statusBarHeight +customHeight) * 750 / systemInfo.windowWidth;
|
|
|
+
|
|
|
+ this.setData({
|
|
|
+ statusBarHeight,
|
|
|
+ screenHeight,
|
|
|
+ customHeight,
|
|
|
+ bottomNavHeight,
|
|
|
+ contentHeight
|
|
|
+ });
|
|
|
+ console.log(this.data.bottomNavHeight);
|
|
|
},
|
|
|
},
|
|
|
/**
|
|
|
* 组件的方法列表
|
|
|
*/
|
|
|
methods: {
|
|
|
+ //滑动显示导航栏
|
|
|
+ onScroll: function (event) {
|
|
|
+ const scrollTop = event.detail.scrollTop; // 获取当前滚动位置
|
|
|
+ this.setData({
|
|
|
+ scrollTop: scrollTop,
|
|
|
+ showNav: scrollTop > 295 // 当滚动超过 时显示导航栏
|
|
|
+ });
|
|
|
+ },
|
|
|
//随轮播图变化而变化
|
|
|
onSwiperChange: function (event) {
|
|
|
const currentIndex = event.detail.current; // 获取当前索引
|
|
|
this.setData({
|
|
|
index: currentIndex + 1
|
|
|
})
|
|
|
- }
|
|
|
+ },
|
|
|
+
|
|
|
+ //选择日期
|
|
|
+ //打开日历
|
|
|
+ onDisplay() {
|
|
|
+ this.setData({ show: true });
|
|
|
+ },
|
|
|
+ //关闭日历
|
|
|
+ onClose() {
|
|
|
+ this.setData({ show: false });
|
|
|
+ },
|
|
|
+ formatDate(date) {
|
|
|
+ date = new Date(date);
|
|
|
+ console.log(date);
|
|
|
+ return `${date.getMonth() + 1}月${date.getDate()}日`;
|
|
|
+ },
|
|
|
+ onConfirm(event) {
|
|
|
+ const [start, end] = event.detail;
|
|
|
+ this.setData({
|
|
|
+ show: false,
|
|
|
+ date_start: `${this.formatDate(start)} `,
|
|
|
+ date_end:`${this.formatDate(end)}`
|
|
|
+ });
|
|
|
+ console.log(this.data.date_start,this.data.date_end);
|
|
|
+ },
|
|
|
}
|
|
|
})
|
