Hooke / meihua-island-book

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
e4736065 1 parent d01e12aa

fix

Inline Side-by-side
Showing 4 changed files with 75 additions and 31 deletions
.book-page {
position: relative;
.cover-header {
background-image: url(https://img.yzcdn.cn/vant/cat.jpeg);
width: 100%;
height: 10rem;
background-size: cover;
background-position: center;
position: relative;
overflow: hidden;
z-index: 1;
}
// .cover-header {
// background-image: url(https://img.yzcdn.cn/vant/cat.jpeg);
// width: 100%;
// height: 10rem;
// background-size: cover;
// background-position: center;
// position: relative;
// overflow: hidden;
// z-index: 1;
// }
.book-content {
z-index: 9;
position: absolute;
top: 9rem;
left: 0;
right: 0;
bottom: 0;
background-color: #FFF;
border-top-left-radius: 0.5rem;
border-top-right-radius: 0.5rem;
overflow: auto;
height: 100%;
padding: 1rem 0.75rem;
.book-calc {}
// height: calc(100vh - 6.5rem);
padding-top: 1rem;
.book-cal {
padding: 0 0.75rem;
}
.book-type {}
.book-list {}
}
}
.nut-tab-pane {
padding: 0;
}
......
<!--
* @Date: 2022-09-19 14:11:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-12-15 10:43:48
* @LastEditTime: 2023-12-15 13:07:36
* @FilePath: /meihuaApp/src/pages/book/index.vue
* @Description: 文件描述
-->
<template>
<view class="book-page">
<view class="cover-header"></view>
<view class="book-content">
<view class="book-calc">
<view id="book-content" class="book-content">
<view id="book-cal" class="book-cal">
<calendar-select @on-dates-change="onDatesChange"></calendar-select>
</view>
<view class="book-type">类型选择</view>
<view class="book-list">scroll-view</view>
<view class="book-type">
<nut-tabs v-model="value" title-scroll title-gutter="10" name="tabName" background="#FFF" color="#4C2E08" animated-time="0">
<nut-tab-pane v-for="item in list" :title="'Tab ' + item" :pane-key="item">
<view class="book-list">
<scroll-view :style="scrollStyle" :scroll-y="true" :scroll-with-animation="true" @scrolltolower="onScrollToLower">
<view v-for="(item, index) in 20" :key="index">
<room-card :key="index"></room-card>
<view v-if="index === 19" style="height: 2rem;"></view>
</view>
</scroll-view>
</view>
</nut-tab-pane>
</nut-tabs>
</view>
</view>
<nav-bar activated="book" />
</view>
......@@ -24,16 +35,53 @@ import Taro from '@tarojs/taro'
import { ref } from "vue";
import calendarSelect from '@/components/calendarSelect.vue'
import navBar from '@/components/navBar.vue'
import roomCard from '@/components/roomCard.vue'
const onDatesChange = ({ startDate, endDate }) => {
console.warn(startDate, endDate);
}
const value = ref('0');
const list = new Array(10).fill(0).map((_, index) => index);
</script>
<script>
import "./index.less";
import { $ } from '@tarojs/extend'
export default {
name: "bookPage",
computed: {
scrollStyle() {
return {
height: this.indexCoverHeight + 'px',
// paddingBottom: 50 + 'px',
};
},
},
mounted () {
// 设置首页封面高度
const windowHeight = wx.getSystemInfoSync().windowHeight;
setTimeout(async () => {
const navHeight = await $('#navbar-page').height();
const calHeight = await $('#book-cal').height();
this.indexCoverHeight = windowHeight - navHeight - calHeight - 50;
}, 500);
},
data() {
return {
indexCoverHeight: 0,
};
},
methods: {
onScrollToLower () {
// if(!this.flag){
// return
// }
// this.flag = false;
// this.getList();
console.warn('onScrollToLower');
},
}
};
</script>
......
<!--
* @Date: 2022-09-19 14:11:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-12-14 18:22:45
* @LastEditTime: 2023-12-15 13:25:58
* @FilePath: /meihuaApp/src/pages/index/index.vue
* @Description: 首页
-->
......
<!--
* @Date: 2023-12-13 11:13:13
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-12-15 10:42:58
* @LastEditTime: 2023-12-15 13:26:42
* @FilePath: /meihuaApp/src/pages/my/index.vue
* @Description: 文件描述
-->
......