小程序文章固定底部评论样式

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

先看看成功展示（评论是固定在底部）：

页面wxml：

<view class='commentsInputLayout' wx:if="{{showview}}" style="bottom:{{keyboardHeight}}px;height:150rpx;border: 1px solid lightgray;">
        <input value='{{commentsContent}}' type='text' name="content" style="background-color: #F3F3F3;margin-top: 3rpx;margin-left: 15rpx;margin-bottom: 20rpx;margin-right: 5rpx;border-radius:19rpx;float: left;height:80rpx;" class='commentsInput' placeholder='写评论...' placeholder-class='phcolor' bindinput='inputCommentsContentListening' bindfocus="inputCommentsFocus" bindblur="inputCommentsBlur" value="{{commentcontent}}"></input>
        <text class='commentsBtn' bindtap='comment'>评论</text>
        <span style="margin-left: 25rpx;" bindtap="agreeAndCollect" data-operatetype="1"><icon class="iconfont {{showcollect?'icon-shoucang':'icon-buoumaotubiao44'}}" style="font-size: 40rpx;position:relative;bottom:5rpx;"></icon> {{collectnum}}</span>
        <span style="margin-right: 15rpx;margin-left: 10rpx;" bindtap="agreeAndCollect" data-operatetype="0"> <icon class="iconfont {{showagree?'icon-dianzan1':'icon-dianzan'}}" style="font-size: 40rpx;position:relative;bottom:5rpx;"></icon> {{agreenum}}</span>
    </view>

样式wxss：

/*comments样式*/
.commentsInputLayout {
  width: 100%;
  height: 100rpx;
  position: fixed;
  bottom: 0rpx;
  left: 0rpx;
  right: 0rpx;
  z-index: 999;
  display: -webkit-flex;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  /* 使之可以滚动 *//* overflow-y: scroll; *//* 增加该属性，可以增加弹性，是滑动更加顺畅 */
  -webkit-overflow-scrolling: touch;
}
/** border-top必须设置，如不设置在部分机型上会出现定位不准问题*/
.commentsInput {
  width: auto;
  height: 100rpx;
  line-height: 100rpx;
  position: relative;
  flex: 1;
  padding-left: 30rpx;
  padding-right: 30rpx;
  font-size: 32rpx;
  word-break: break-all;
  word-wrap: break-word;
  color: #333;
  border-top: solid #f4f4f4 0.01rpx;
  background-color: #f4f4f4;
  z-index: 21;
}
/** border-top必须设置，如不设置在部分机型上会出现定位不准问题*/
.commentsBtn {
  height: 80rpx;
  line-height: 80rpx;
  position: relative;
  font-size: 30rpx;
  color: black;
  background-color: #F3F3F3;
  z-index: 21;
  width:100rpx;
  text-align: center;
  margin-right: 5rpx;
  margin-top: 3rpx;
  margin-left: 5rpx;
  margin-bottom: 20rpx;
  border-radius:19rpx;
}

js：

在page的data里面定义：

commentcontent:'',//内容（comment）
windowHeight: 0,//记录界面高度（comment）
containerHeight: 0,//记录未固定整体滚动界面的高度（comment）
containerBottomHeight: 0,//记录未固定整体滚动界面距离底部高度（comment）
keyboardHeight: 0,//键盘高度（comment）
isIphone: false//是否为苹果手机，因苹果手机效果与Android有冲突，所以需要特殊处理（comment）

在page定义发方法：

onLoad: function (options) {
  //获取屏幕高度以及设备信息（是否为苹果手机）
  var that = this;
  wx.getSystemInfo({
    success: function(res) {
      that.data.windowHeight = res.windowHeight
      that.data.isIphone = res.model.indexOf("iphone") >= 0 || res.model.indexOf("iPhone") >= 0
    }
  });
},
onReady:function(){//界面初始化渲染需要初始化获取整体界面的高度以及距离信息
  var that = this
  setTimeout(() => {
    //界面初始化渲染需要初始化获取整体界面的高度以及距离信息
    that.refreshContainerHeight()
  }, 800);
},
onPageScroll: function(e) {//界面滚动监听
  var that = this
  // 界面滚动刷新整体界面高度以及间距
  that.refreshContainerHeight()
},
inputCommentsContentListening:function(e){
  this.setData({
    commentcontent: e.detail.value
  });
},
inputCommentsFocus: function(e) {//comment框焦点获取监听
  var that = this
  if (!that.data.isIphone) {
    var keyboardHeight = e.detail.height
    var windowHeight = that.data.windowHeight
    var containerHeight = that.data.containerHeight
    var containerBottomHeight = that.data.containerBottomHeight
    //整体内容高度大于屏幕高度，才动态计算输入框移动的位置；
    if (containerHeight > windowHeight) {
      if ((containerBottomHeight - windowHeight) > keyboardHeight) {
        //距离底部高度与屏幕高度的差值大于键盘高度，则comment布局上移键盘高度；
        that.setData({
          keyboardHeight: e.detail.height
        })
      } else {
        //距离底部高度与屏幕高度的差值小于键盘高度，则comment布局上移距离底部高度与屏幕高度的差值；
        var newHeight = containerBottomHeight - windowHeight
        that.setData({
          keyboardHeight: newHeight
        })
      }
    } else {
      that.setData({
        keyboardHeight: 0
      })
    }
  } else {
    that.setData({
      keyboardHeight: 0
    })
  }
},
inputCommentsBlur: function(e) {//comment框焦点失去监听
  var that = this
  that.setData({
    keyboardHeight: 0
  })
},
refreshContainerHeight: function() {//刷新整体界面高度、距离等信息，如列表有上划加载数据，需要在数据加载过后调用此方法进行高度以及间距的刷新
  var that = this
  var query = wx.createSelectorQuery();
  query.select('.container').boundingClientRect()
  query.exec((res) => {
    //container为整体界面的class的样式名称
    that.data.containerHeight = res[0].height;
    that.data.containerBottomHeight = res[0].bottom
  })
}

由于本人主要是服务端开发，以上样式有些是直接定义在页面，请见谅！

来源：oschina

链接：https://my.oschina.net/puguole/blog/3147686