nyx weapp: 页面更新

1. 输入留言，保持热榜固定
2. 前端调整为rpx模式，保持热榜始终为3行

app/nyx-dev/pages/share/share.js

@@ -93,7 +93,9 @@ Page({
     ],
 
     bottom_val: 0,
-    
+    pxToRpxScale: 0,
+    tabBarHeight: 0,
+
   },
 
   /**
@@ -160,16 +162,39 @@ Page({
     /**
       * 系统配置：主要用于置底页面设置 step2
       let h = 750 * res.windowHeight/res.windowWidth
-    */
+    */ 
+    let systemInfo = wx.getSystemInfoSync()
+	  // px转换到rpx的比例
+    let pxToRpxScale = 750 / systemInfo.windowWidth;
     //获取设备高度，小程序自带的方法
-    var windowHeight = wx.getSystemInfoSync().windowHeight; 
+    var windowHeight = systemInfo.windowHeight;
+
     var keyHeight = windowHeight*0.3
-    var chatHeight = windowHeight - keyHeight
+    keyHeight = 16*3+8*(3+2) // 16: font-size; 8: padding: 16rpx
+    var chatHeight = windowHeight - keyHeight - 60 // in px
     _this.setData({
-      keyHeight: keyHeight,
-      chatHeight: chatHeight,
+      keyHeight: keyHeight * pxToRpxScale, //in rpx for compatible
+      chatHeight: chatHeight * pxToRpxScale, // in rpx for compatible
     })
 
+    // 状态栏的高度
+    let ktxStatusHeight = systemInfo.statusBarHeight * pxToRpxScale
+
+    // 计算导航栏的高度
+    // 此高度基于右上角菜单在导航栏位置垂直居中计算得到
+    // ipx: 44
+    // ipx: height + (top - statusBarHeight) * 2;    
+    var navBarHeight = 44
+    let navigationHeight = navBarHeight * pxToRpxScale
+    // window的宽度
+    // let ktxWindowWidth = systemInfo.windowWidth * pxToRpxScale
+    // window的高度
+    let ktxWindowHeight = systemInfo.windowHeight * pxToRpxScale
+    // 屏幕的高度
+    let ktxScreentHeight = systemInfo.screenHeight * pxToRpxScale
+    // 底部tabBar的高度
+    let tabBarHeight = ktxScreentHeight - ktxStatusHeight - navigationHeight - ktxWindowHeight
+    _this.setData({ pxToRpxScale, tabBarHeight })
    
     //模拟表情数据
     let emotion = emotionFun();
@@ -180,8 +205,6 @@ Page({
 
     //构建榜单数据    
     _this.onGetRedisLike()
-    //var raw = _this.__data__.rankData_raw_like
-    //_this.genRankData(raw, '@')
 
   },
 
@@ -364,16 +387,20 @@ Page({
   inputFocus:function(e)
   {
     console.log(e)
-    var _this = this;    
+    var _this = this;
+    var tabBarHeight = _this.__data__.tabBarHeight
+    var pxToRpxScale = _this.__data__.pxToRpxScale
+    console.log("===tabBarHeight", tabBarHeight)
+    console.log("===pxToRpxScale", pxToRpxScale)
     _this.setData({
-      bottom_val: e.detail.height==0 ? 0 : e.detail.height - 80
+      bottom_val: e.detail.height==0 ? 0 : e.detail.height*pxToRpxScale - tabBarHeight
     })
   },
   inputBlur: function(e){
     console.log(e)
     var _this = this;
     _this.setData({
-      bottom_val: 0
+      bottom_val: 0,
     })
   },
 

app/nyx-dev/pages/share/share.wxml

@@ -8,7 +8,7 @@
   </view>
   <!-- start_of_tab-content -->
   <scroll-view scroll-y="true" scroll-top="0">
-  <view class="tab-content" style="height:{{keyHeight-100}}px;">    
+  <view class="tab-content" style="height:{{keyHeight}}rpx;">    
     <view class="rank-info" wx:for="{{rankData}}" 
               wx:key="{{item.id}}" data-id="{{item.id}}" data-index="{{index}}" 
               bindtap="switchCategory">
@@ -27,11 +27,11 @@
 <!--end key view -->
 
 <!--公屏view-->
-<view style="height:{{chatHeight+40}}px;position:fixed; bottom:0;">
+<view style="height:{{chatHeight}}rpx;position:fixed; bottom:0;">
 <view class="weui-cell weui-cell_access">
     <view class="weui-cell__bd">公屏发言</view>
 </view>
-<scroll-view scroll-y="true" scroll-top="{{scrollTop}}" style="height:{{chatHeight}}px;position:fixed; bottom:0;">
+<scroll-view scroll-y="true" scroll-top="{{scrollTop}}" style="height:{{chatHeight-80}}rpx;position:fixed; bottom:0;">
 <view class="wrapper {{isShowAdd?'media-padd':''}} {{isEmotion?'emotion-padd':''}}" id="wrapperCon" bindtap="cancelShow" >
   <!-- 消息列表 -->
   <view class="chat {{item.type=='L'?'chat-l':'chat-r'}}" wx:for="{{messageList}}" wx:for-item="item">
@@ -54,8 +54,8 @@
 </view>
 
 <!-- 消息输入 -->
-<view class="message-input" style="position:fixed; bottom:{{bottom_val}}px">
-  <input class="{{isShowAdd?'':'showSend'}}" placeholder="请输入内容" type="text" value="{{messageInputVal}}" cursor-spacing="10" bindinput='messageInput' confirm-type="send" bindconfirm="messageSend" bindfocus="inputFocus" bindblur="inputBlur" adjust-position="{{false}}" />
+<view class="message-input" style="position:absolute; bottom:{{bottom_val}}rpx">
+  <input class="{{isShowAdd?'':'showSend'}}" placeholder="请输入内容" type="text" value="{{messageInputVal}}" cursor-spacing="20" bindinput='messageInput' confirm-type="send" bindconfirm="messageSend" bindfocus="inputFocus" bindblur="inputBlur" adjust-position="{{false}}" />
   <button bindtap="messageSend" wx:if="{{!isShowAdd}}">发送</button>
   <image mode="widthFix" class="input-img {{isShowAdd?'':'showAdd'}}" src='../../icon/chat/face1.png' id="face" bindtap="openEmotion"></image>
   <image mode="widthFix" class="input-img" wx:if="{{isShowAdd}}" src='../../icon/chat/add1.png' id="add" bindtap="openMedia"></image>