Commit 0af5f384 by zhangcheng

初始化

parent 80a45971
<template> <template>
<view class="page-body" :style="{height:`${height}px`,'padding-bottom':'50px'}"> <view class="menu-box">
<!-- height:`${height}px`, -->
<view class="menu-banner"><image src="../../static/imgs/banner.png"></image></view>
<view class="page-body" :style="{height:`${height-bannerh}px`}">
<!-- <u-button @click="uniGetUserInfo">按钮授权</u-button> --> <!-- <u-button @click="uniGetUserInfo">按钮授权</u-button> -->
<scroll-view class="nav-left" scroll-y :style="{height:`${height}px`}" :scroll-top="scrollLeftTop" scroll-with-animation> <scroll-view class="nav-left" scroll-y :style="{height:`${height-bannerh}px`}" :scroll-top="scrollLeftTop" scroll-with-animation>
<view class="nav-left-item" @click="categoryClickMain(index)" :key="index" :class="index == categoryActive ? 'active' : ''" v-for="(item, index) in classifyData"> <view class="nav-left-item" @click="categoryClickMain(index)" :key="index" :class="index == categoryActive ? 'active' : ''" v-for="(item, index) in classifyData">
{{ item.name }} {{ item.name }}
</view> </view>
...@@ -11,7 +14,7 @@ ...@@ -11,7 +14,7 @@
scroll-y scroll-y
:scroll-top="scrollTop" :scroll-top="scrollTop"
@scroll="scroll" @scroll="scroll"
:style="{height:`${height}px`}" :style="{height:`${height-bannerh}px`}"
scroll-with-animation scroll-with-animation
> >
<view v-for="(foods, index) in classifyData" :key="index" class="box"> <view v-for="(foods, index) in classifyData" :key="index" class="box">
...@@ -28,13 +31,14 @@ ...@@ -28,13 +31,14 @@
<u-tabbar-item v-for="(item,index) in list" :key="item.text" :text="item.text" :icon="selectedTabbar==index?item.activeIcon:item.icon"></u-tabbar-item> <u-tabbar-item v-for="(item,index) in list" :key="item.text" :text="item.text" :icon="selectedTabbar==index?item.activeIcon:item.icon"></u-tabbar-item>
</u-tabbar> </u-tabbar>
</view> </view>
</view>
</template> </template>
<script> <script>
export default { export default {
data() { data() {
return { return {
bannerh:0,
name: 'wkiwi', name: 'wkiwi',
height: 0, height: 0,
categoryActive: 0, categoryActive: 0,
...@@ -1135,6 +1139,19 @@ ...@@ -1135,6 +1139,19 @@
// }) // })
}, },
onLoad: function() { onLoad: function() {
let _this = this;
uni.createSelectorQuery()
.select('.menu-banner')
.boundingClientRect(data => {
_this.bannerh = data.height;
}).exec();
uni.createSelectorQuery()
.select('.u-tabbar__content')
.boundingClientRect(data => {
_this.tabBarHeight = data.height;
console.log(_this.tabBarHeight,5555522222)
}).exec();
console.log(this.tabBarHeight,5544)
this.height = uni.getSystemInfoSync().windowHeight - this.tabBarHeight; this.height = uni.getSystemInfoSync().windowHeight - this.tabBarHeight;
}, },
onReady() { onReady() {
...@@ -1151,6 +1168,7 @@ ...@@ -1151,6 +1168,7 @@
}, },
getHeightList() { getHeightList() {
let _this = this; let _this = this;
let selectorQuery = uni.createSelectorQuery(); let selectorQuery = uni.createSelectorQuery();
selectorQuery.selectAll('.nav-left-item').boundingClientRect(function(rects) { selectorQuery.selectAll('.nav-left-item').boundingClientRect(function(rects) {
_this.leftItemHeight = rects[0].height; _this.leftItemHeight = rects[0].height;
...@@ -1217,6 +1235,13 @@ ...@@ -1217,6 +1235,13 @@
</script> </script>
<style lang="scss"> <style lang="scss">
.menu-box{}
.menu-banner{
image{
width: 100%;
height: 376rpx;
}
}
.page-body { .page-body {
display: flex; display: flex;
background: #fff; background: #fff;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment