Commit c88f93618a348a1620f1e420e441f08c544ca7c2
1 parent
82668858
顶部导航的优化
Showing
3 changed files
with
20 additions
and
37 deletions
components/com_top_nav/com_top_nav.js
| @@ -2,42 +2,18 @@ var t = getApp(),os = t.globalData.setting; | @@ -2,42 +2,18 @@ var t = getApp(),os = t.globalData.setting; | ||
| 2 | Component({ | 2 | Component({ |
| 3 | properties: {}, | 3 | properties: {}, |
| 4 | data: { | 4 | data: { |
| 5 | - isopen: 0, | ||
| 6 | iurl: os.imghost, | 5 | iurl: os.imghost, |
| 7 | - nav_left: "首页", //导航左边 | ||
| 8 | - nav_center: "预约", //导航中间 | ||
| 9 | - nav_right: "我的", //导航右边 | ||
| 10 | - nav_left_url: "/pages/index/index/index", //导航左边地址 | ||
| 11 | - nav_center_url: "/pages/user/my_service/tment_order_list", //导航中间地址 | ||
| 12 | - nav_right_url: "/pages/user/index/index", //导航右边地址 | 6 | + height:0, |
| 7 | + h1:0, | ||
| 8 | + h2:0 | ||
| 9 | + }, | ||
| 10 | + ready: function() { | ||
| 11 | + let height= getApp().globalData.navBarHeight; | ||
| 12 | + let menuInfo = getApp().globalData.menuInfo; | ||
| 13 | + //-- 胶囊的高度 -- | ||
| 14 | + this.setData({height,h1:menuInfo.top,h2:menuInfo.height}); | ||
| 13 | }, | 15 | }, |
| 14 | - ready: function() {}, | ||
| 15 | methods: { | 16 | methods: { |
| 16 | - //--点击打开事件-- | ||
| 17 | - open_box: function() { | ||
| 18 | - this.setData({ | ||
| 19 | - isopen: 1 | ||
| 20 | - }); | ||
| 21 | - }, | ||
| 22 | - set_name: function(name,url) { | ||
| 23 | - var th = this; | ||
| 24 | - th.setData({ | ||
| 25 | - nav_center:name, | ||
| 26 | - nav_center_url:url | ||
| 27 | - }) | ||
| 28 | - }, | ||
| 29 | - //--关闭事件-- | ||
| 30 | - close_box: function() { | ||
| 31 | - this.setData({ | ||
| 32 | - isopen: 0 | ||
| 33 | - }); | ||
| 34 | - }, | ||
| 35 | - //--跳转-- | ||
| 36 | - goto: function(e) { | ||
| 37 | - var url = e.currentTarget.dataset.url; | ||
| 38 | - getApp().goto(url); | ||
| 39 | - this.close_box(); | ||
| 40 | - } | ||
| 41 | 17 | ||
| 42 | } | 18 | } |
| 43 | 19 |
components/com_top_nav/com_top_nav.wxml
| 1 | -<view style="height:130rpx;color: #313131; position:fixed;top:0;left:0; font-size:24rpx; width:100%;z-index:11111111;"> | ||
| 2 | - | ||
| 3 | - ID:454545 | 1 | +<view class="t_nav" style="height:{{height}}px"> |
| 2 | + <view style="height:{{h1}}px"></view> | ||
| 3 | + <view class="contant" style="height:{{h2}}px"> | ||
| 4 | + <view>你好</view> | ||
| 5 | + <view class="tab">ID:454545</view> | ||
| 6 | + </view> | ||
| 4 | </view> | 7 | </view> |
| 5 | -<view style="height:130rpx"></view> | ||
| 6 | \ No newline at end of file | 8 | \ No newline at end of file |
| 9 | +<!-- 用于顶开层的高 --> | ||
| 10 | +<view style="height:{{height}}px"></view> | ||
| 7 | \ No newline at end of file | 11 | \ No newline at end of file |
components/com_top_nav/com_top_nav.wxss
| 1 | +.t_nav{ color: #313131; position:fixed;top:0;left:0; width:100%;z-index:9999; background-color: #fff } | ||
| 2 | +.tab{ font-size:24rpx; position: absolute; right: 24rpx; top:-28rpx } | ||
| 3 | +.contant{ display: flex; justify-content: center; align-items: center; width: 100%; position: relative } | ||
| 0 | \ No newline at end of file | 4 | \ No newline at end of file |