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
1 .book-page { 1 .book-page {
2 position: relative; 2 position: relative;
3 - .cover-header { 3 + // .cover-header {
4 - background-image: url(https://img.yzcdn.cn/vant/cat.jpeg); 4 + // background-image: url(https://img.yzcdn.cn/vant/cat.jpeg);
5 - width: 100%; 5 + // width: 100%;
6 - height: 10rem; 6 + // height: 10rem;
7 - background-size: cover; 7 + // background-size: cover;
8 - background-position: center; 8 + // background-position: center;
9 - position: relative; 9 + // position: relative;
10 - overflow: hidden; 10 + // overflow: hidden;
11 - z-index: 1; 11 + // z-index: 1;
12 - } 12 + // }
13 .book-content { 13 .book-content {
14 - z-index: 9; 14 + // height: calc(100vh - 6.5rem);
15 - position: absolute; 15 + padding-top: 1rem;
16 - top: 9rem; 16 + .book-cal {
17 - left: 0; 17 + padding: 0 0.75rem;
18 - right: 0; 18 + }
19 - bottom: 0;
20 - background-color: #FFF;
21 - border-top-left-radius: 0.5rem;
22 - border-top-right-radius: 0.5rem;
23 - overflow: auto;
24 - height: 100%;
25 - padding: 1rem 0.75rem;
26 - .book-calc {}
27 .book-type {} 19 .book-type {}
28 .book-list {} 20 .book-list {}
29 } 21 }
30 } 22 }
23 +
24 +.nut-tab-pane {
25 + padding: 0;
26 +}
......
1 <!-- 1 <!--
2 * @Date: 2022-09-19 14:11:06 2 * @Date: 2022-09-19 14:11:06
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2023-12-15 10:43:48 4 + * @LastEditTime: 2023-12-15 13:07:36
5 * @FilePath: /meihuaApp/src/pages/book/index.vue 5 * @FilePath: /meihuaApp/src/pages/book/index.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
8 <template> 8 <template>
9 <view class="book-page"> 9 <view class="book-page">
10 - <view class="cover-header"></view> 10 + <view id="book-content" class="book-content">
11 - <view class="book-content"> 11 + <view id="book-cal" class="book-cal">
12 - <view class="book-calc">
13 <calendar-select @on-dates-change="onDatesChange"></calendar-select> 12 <calendar-select @on-dates-change="onDatesChange"></calendar-select>
14 </view> 13 </view>
15 - <view class="book-type">类型选择</view> 14 + <view class="book-type">
16 - <view class="book-list">scroll-view</view> 15 + <nut-tabs v-model="value" title-scroll title-gutter="10" name="tabName" background="#FFF" color="#4C2E08" animated-time="0">
16 + <nut-tab-pane v-for="item in list" :title="'Tab ' + item" :pane-key="item">
17 + <view class="book-list">
18 + <scroll-view :style="scrollStyle" :scroll-y="true" :scroll-with-animation="true" @scrolltolower="onScrollToLower">
19 + <view v-for="(item, index) in 20" :key="index">
20 + <room-card :key="index"></room-card>
21 + <view v-if="index === 19" style="height: 2rem;"></view>
22 + </view>
23 + </scroll-view>
24 + </view>
25 + </nut-tab-pane>
26 + </nut-tabs>
27 + </view>
17 </view> 28 </view>
18 <nav-bar activated="book" /> 29 <nav-bar activated="book" />
19 </view> 30 </view>
...@@ -24,16 +35,53 @@ import Taro from '@tarojs/taro' ...@@ -24,16 +35,53 @@ import Taro from '@tarojs/taro'
24 import { ref } from "vue"; 35 import { ref } from "vue";
25 import calendarSelect from '@/components/calendarSelect.vue' 36 import calendarSelect from '@/components/calendarSelect.vue'
26 import navBar from '@/components/navBar.vue' 37 import navBar from '@/components/navBar.vue'
38 +import roomCard from '@/components/roomCard.vue'
27 39
28 const onDatesChange = ({ startDate, endDate }) => { 40 const onDatesChange = ({ startDate, endDate }) => {
29 console.warn(startDate, endDate); 41 console.warn(startDate, endDate);
30 } 42 }
43 +
44 +const value = ref('0');
45 +const list = new Array(10).fill(0).map((_, index) => index);
31 </script> 46 </script>
32 47
33 <script> 48 <script>
34 import "./index.less"; 49 import "./index.less";
50 +import { $ } from '@tarojs/extend'
35 51
36 export default { 52 export default {
37 name: "bookPage", 53 name: "bookPage",
54 + computed: {
55 + scrollStyle() {
56 + return {
57 + height: this.indexCoverHeight + 'px',
58 + // paddingBottom: 50 + 'px',
59 + };
60 + },
61 + },
62 + mounted () {
63 + // 设置首页封面高度
64 + const windowHeight = wx.getSystemInfoSync().windowHeight;
65 + setTimeout(async () => {
66 + const navHeight = await $('#navbar-page').height();
67 + const calHeight = await $('#book-cal').height();
68 + this.indexCoverHeight = windowHeight - navHeight - calHeight - 50;
69 + }, 500);
70 + },
71 + data() {
72 + return {
73 + indexCoverHeight: 0,
74 + };
75 + },
76 + methods: {
77 + onScrollToLower () {
78 + // if(!this.flag){
79 + // return
80 + // }
81 + // this.flag = false;
82 + // this.getList();
83 + console.warn('onScrollToLower');
84 + },
85 + }
38 }; 86 };
39 </script> 87 </script>
......
1 <!-- 1 <!--
2 * @Date: 2022-09-19 14:11:06 2 * @Date: 2022-09-19 14:11:06
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2023-12-14 18:22:45 4 + * @LastEditTime: 2023-12-15 13:25:58
5 * @FilePath: /meihuaApp/src/pages/index/index.vue 5 * @FilePath: /meihuaApp/src/pages/index/index.vue
6 * @Description: 首页 6 * @Description: 首页
7 --> 7 -->
......
1 <!-- 1 <!--
2 * @Date: 2023-12-13 11:13:13 2 * @Date: 2023-12-13 11:13:13
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2023-12-15 10:42:58 4 + * @LastEditTime: 2023-12-15 13:26:42
5 * @FilePath: /meihuaApp/src/pages/my/index.vue 5 * @FilePath: /meihuaApp/src/pages/my/index.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
......