导航栏

app.js

@@ -6,6 +6,22 @@ App({
     logs.unshift(Date.now())
     wx.setStorageSync('logs', logs)
 
+    let menuButtonObject = wx.getMenuButtonBoundingClientRect();
+    wx.getSystemInfo({
+      success: res => {
+        let statusBarHeight = res.statusBarHeight,
+          navTop = menuButtonObject.top,//胶囊按钮与顶部的距离
+          navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top - statusBarHeight)*2;//导航高度
+        this.statusBarHeight = statusBarHeight;
+        this.globalData.navHeight = navHeight;
+        this.globalData.navTop = navTop;
+        this.globalData.windowHeight = res.windowHeight;
+      },
+      fail(err) {
+        console.log(err);
+      }
+    })
+
     // 登录
     wx.login({
       success: res => {
@@ -37,6 +53,7 @@ App({
       }
     })
   },
+  
   globalData: {
     userInfo: null
   }

app.json

@@ -13,7 +13,7 @@
   "window": {
     "backgroundTextStyle": "light",
     "navigationBarBackgroundColor": "#fff",
-    "navigationBarTitleText": "首页",
+    "navigationBarTitleText": "证券分析",
     "navigationBarTextStyle": "black"
   },
   "tabBar": {

components/navBar/navBar.js

@@ -0,0 +1,103 @@
+// pages/navBar/navBar.js
+Component({
+    /**
+     * 组件的属性列表
+     */
+    properties: {
+        background: {
+            type: String,
+            value: 'rgba(255, 255, 255, 1)'
+        },
+        color: {
+            type: String,
+            value: 'rgba(0, 0, 0, 1)'
+        },
+        titleText: {
+            type: String,
+            value: '请输入板块代码'
+        },
+        titleImg: {
+            type: String,
+            value: ''
+        },
+        backIcon: {
+            type: String,
+            value: ''
+        },
+        homeIcon: {
+            type: String,
+            value: ''
+        },
+        fontSize: {
+            type: Number,
+            value: 16
+        },
+        iconHeight: {
+            type: Number,
+            value: 19
+        },
+        iconWidth: {
+            type:Number,
+            value: 58
+        }
+    },
+    attached: function(){
+        var that = this;
+        that.setNavSize();
+        that.setStyle();
+    },
+    data: {
+
+    },
+    methods: {
+        // 通过获取系统信息计算导航栏高度
+        setNavSize: function() {
+            var that = this
+                , sysinfo = wx.getSystemInfoSync()
+                , statusHeight = sysinfo.statusBarHeight
+                , isiOS = sysinfo.system.indexOf('iOS') > -1
+                , navHeight;
+            if (!isiOS) {
+                navHeight = 48;
+            } else {
+                navHeight = 44;
+            }
+            that.setData({
+                status: statusHeight,
+                navHeight: navHeight
+            })
+        },
+        setStyle: function() {
+            var that  = this
+                , containerStyle
+                , textStyle
+                , iconStyle;
+            containerStyle = [
+                'background:' + that.data.background
+                ].join(';');
+            textStyle = [
+                'color:' + that.data.color,
+                'font-size:' + that.data.fontSize + 'px'
+            ].join(';');
+            iconStyle = [
+                'width: ' + that.data.iconWidth + 'px',
+                'height: ' + that.data.iconHeight + 'px'
+            ].join(';');
+            that.setData({
+                containerStyle: containerStyle,
+                textStyle: textStyle,
+                iconStyle: iconStyle
+            })
+        },
+        // 返回事件
+        back: function(){
+            wx.navigateBack({
+                delta: 1
+            })
+            this.triggerEvent('back', {back: 1})
+        },
+        home: function() {
+            this.triggerEvent('home', {});
+        }
+    }
+})

components/navBar/navBar.json

@@ -0,0 +1,4 @@
+{
+    "component": true,
+    "usingComponents": {}
+}

components/navBar/navBar.wxml

@@ -0,0 +1,24 @@
+<view class='nav' style='height: {{status + navHeight}}px'>
+    <view class='status' style='height:{{status}}px;{{containerStyle}}'></view>
+    <view class='navbar' style='height:{{navHeight}}px;{{containerStyle}}'>
+        <!-- <view class='back-icon' wx:if="{{backIcon}}" bindtap='back'>
+            <image src='{{backIcon}}'></image>
+        </view>
+        <view class='home-icon' wx:if="{{homeIcon}}" bindtap='home'>
+            <image src='{{homeIcon}}'></image>
+        </view>
+        <view class='nav-icon' wx:if="{{titleImg}}">
+            <image src='{{titleImg}}' style='{{iconStyle}}'></image>
+        </view> -->
+        <!-- <view class='nav-title' wx:if="{{titleText && !titleImg}}">
+            <text style='{{textStyle}}'>{{titleText}}</text>
+        </view> -->
+        <view class='nav-title'>
+           <view class="input-box row">
+               <input placeholder="请输入板块代码" />
+               <icon class="weui-icon-search_in-box" type="search" size="20"></icon>
+            </view>
+            <!-- <input placeholder="请输入板块代码" style='{{textStyle}}'/> -->
+        </view>
+    </view>
+</view>

components/navBar/navBar.wxss

@@ -0,0 +1,61 @@
+.navbar{
+    position: relative
+}
+.back-icon, .home-icon{
+    width: 28px;
+    height: 100%;
+    position: absolute;
+    transform: translateY(-50%);
+    top: 50%;
+    display: flex;
+}
+.back-icon{
+    left: 16px;
+}
+.home-icon{
+    left: 44px
+}
+.back-icon image{
+    width: 28px;
+    height: 28px;
+    margin: auto;
+}
+.home-icon image{
+    width: 20px;
+    height: 20px;
+    margin: auto;
+}
+.nav-title, .nav-icon{
+    position: absolute;
+    transform: translate(-50%, -50%);
+    left: 30%;
+    top: 50%;
+    font-size: 0;
+    /* font-weight: bold; */
+    width: 60%;
+}
+.input-box {
+    width: 100%;
+    height: 100%;
+    /* background-color: #eee; */
+    justify-content: center;
+    align-items: center;
+    float: left;
+    margin-left: 3%;
+    display: flex;
+  }
+   
+  .input-box input {
+    font-size: 12px;
+    color: #333;
+    width: 90%;
+    height: 30px;
+    background-color: #ffffff;
+    border-radius: 44rpx;
+    padding-left: 7%;
+    padding-right: 3%;
+    border: 1rpx solid #E5E5E5;
+  }
+  .weui-icon-search_in-box{
+      margin-left: -60rpx;
+  }

pages/index/index.js

@@ -134,6 +134,7 @@ Page({
     //    console.log(res.top);
     // }).exec();
 },
+
   onLoad: function () {
     // this.computeScrollViewHeight();
     // if (app.globalData.userInfo) {

pages/index/index.json

@@ -1,3 +1,6 @@
 {
-  "usingComponents": {}
+  "navigationStyle": "custom",
+  "usingComponents": {
+    "navBar": "/components/navBar/navBar"
+  }
 }

pages/index/index.wxml

@@ -1,4 +1,8 @@
 <!--index.wxml-->
+<!-- <view>
+  <component-tag-name inner-text="Some text"></component-tag-name>
+</view> -->
+<navBar></navBar>
 <view class="container">
   <view class="userinfo">
     <!-- <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
@@ -18,9 +22,9 @@
   <view class="news">
     <text class="news-today">今日快讯</text>
   </view>
-  <view class="line">
+  <!-- <view class="line">
     1
-  </view>
+  </view> -->
     <!-- <swiper class="tab-right"  id="test" vertical="true" autoplay="true" circular="true" interval="2000" display-multiple-items='6'>
       <view class="right-item">
         <block wx:for-index="idx" wx:for='{{aa}}'>

pages/index/index.wxss

@@ -69,13 +69,13 @@
   float: left;
 }
 .tab{
-  width: 90%;
+  width: 100%;
   background-color:#1C1C1C ;
   color: #fff;
 }
 .content-item {
   /* height: 50rpx; */
-  border-bottom: 1rpx solid #ede1d4;
+  /* border-bottom: 1rpx solid #ede1d4; */
   width: 100%;
   display: flex;
   flex-direction: column;
@@ -83,7 +83,7 @@
 }
 .from{
   font-size: 24rpx;
-  margin-left: 10rpx;
+  margin-left: 20rpx;
   color: #999;
   margin-top:10rpx;
 }
@@ -91,14 +91,15 @@
   font-size: 30rpx;
   /* line-height: 100rpx; */
   color: #fff;
-  margin:10rpx;
-  width: 100%;
+  margin:10rpx 20rpx;
+  /* width: 100%; */
   height:100%;
   overflow: hidden;
+  /* border: 1rpx solid red; */
 }
 .wawa {
   font-size: 26rpx;
-  margin-left:10rpx;
+  margin-left:20rpx;
   /* float: right; */
   /* line-height: 100rpx; */
   /* margin-right: 20rpx; */
@@ -106,7 +107,7 @@
 }
 .time{
   font-size: 24rpx;
-  margin-left:10rpx;
+  margin-left:20rpx;
   color: #999;
   margin-top:10rpx;
   margin-bottom: 10rpx;