Commit 2c33a8d06c6abb0628881f47b796a8d56bfe6ba1
1 parent
947741a4
列表滑动内容高度计算
Showing
2 changed files
with
16 additions
and
2 deletions
src/pages/myGiftBox/myGiftBox.less
| @@ -3,11 +3,21 @@ | @@ -3,11 +3,21 @@ | ||
| 3 | // height: calc(100vh-25px); | 3 | // height: calc(100vh-25px); |
| 4 | background-color: #fff; | 4 | background-color: #fff; |
| 5 | padding-top: 25px; | 5 | padding-top: 25px; |
| 6 | + .gift_top{ | ||
| 7 | + width: 100%; | ||
| 8 | + background-color: #fff; | ||
| 9 | + position: fixed; | ||
| 10 | + left: 0; | ||
| 11 | + top: 0; | ||
| 12 | + z-index: 100; | ||
| 13 | + } | ||
| 6 | .top_box { | 14 | .top_box { |
| 15 | + z-index: 10; | ||
| 7 | display: flex; | 16 | display: flex; |
| 8 | justify-content: space-between; | 17 | justify-content: space-between; |
| 9 | height: 45px; | 18 | height: 45px; |
| 10 | margin: 0 30px; | 19 | margin: 0 30px; |
| 20 | + // padding-top: 30px; | ||
| 11 | img { | 21 | img { |
| 12 | width: 37px; | 22 | width: 37px; |
| 13 | height: 37px; | 23 | height: 37px; |
| @@ -48,10 +58,11 @@ | @@ -48,10 +58,11 @@ | ||
| 48 | } | 58 | } |
| 49 | } | 59 | } |
| 50 | .item_box{ | 60 | .item_box{ |
| 51 | - height: calc(100vh-214px); | 61 | + // height: calc(100vh-224px); |
| 52 | padding-bottom: 40px; | 62 | padding-bottom: 40px; |
| 53 | overflow-y: auto; | 63 | overflow-y: auto; |
| 54 | box-sizing: border-box; | 64 | box-sizing: border-box; |
| 65 | + padding-top: 120px; | ||
| 55 | .giftItem_box:first-child{ | 66 | .giftItem_box:first-child{ |
| 56 | margin-top: 20px; | 67 | margin-top: 20px; |
| 57 | } | 68 | } |
src/pages/myGiftBox/myGiftBox.vue
| 1 | <template> | 1 | <template> |
| 2 | <div class="my_gift_box"> | 2 | <div class="my_gift_box"> |
| 3 | + <!-- 头部 --> | ||
| 4 | + <div class="gift_top"> | ||
| 3 | <!--tab切换--> | 5 | <!--tab切换--> |
| 4 | <div | 6 | <div |
| 5 | class="top_box" | 7 | class="top_box" |
| 6 | - :style="'padding-top: ' + $parent.top.value + 'px'" | 8 | + :style="'padding-top: ' + ($parent.top.value+15) + 'px'" |
| 7 | > | 9 | > |
| 8 | <img @click="$parent.back" src="static/img/icon_back.png" /> | 10 | <img @click="$parent.back" src="static/img/icon_back.png" /> |
| 9 | <div class="tabs"> | 11 | <div class="tabs"> |
| @@ -27,6 +29,7 @@ | @@ -27,6 +29,7 @@ | ||
| 27 | </van-tab> | 29 | </van-tab> |
| 28 | </van-tabs> | 30 | </van-tabs> |
| 29 | </div> | 31 | </div> |
| 32 | + </div> | ||
| 30 | <!--下拉刷新--> | 33 | <!--下拉刷新--> |
| 31 | <!-- <van-pull-refresh v-model="isLoading" @refresh="onRefresh"> --> | 34 | <!-- <van-pull-refresh v-model="isLoading" @refresh="onRefresh"> --> |
| 32 | <!--内容--> | 35 | <!--内容--> |