GIwqwqF.gif

下面是完整代碼，可以實(shí)現(xiàn)發(fā)送以后自動(dòng)把屏幕的焦點(diǎn)放在最后一條信息

<view class='tab'>
  <view class='lan'>{{tabdata.title}}</view>
  <view class='tent'>
    <text>{{tabdata.attribute_attribute}}</text>
    <text class='fl_r '>{{tabdata.num}}</text>
  </view>
  <view class='xiahuaxian1'></view>
  <view>
    <text class='fabu'>發(fā)布時(shí)間: {{tabdata.time_agree}}</text>
  </view>
</view>
<view class='news'>
  <view class='xiahuaxian1 xiahuaxia'></view>
  <view class='new_top_txt'>您正在與{{tabdata.nickname}}進(jìn)行溝通</view>
  <view class="historycon">
    <scroll-view scroll-y="true" scroll-top="{{scrollTop}}" class="history" wx:for="{{centendata}}" wx:key=''>
      <view>
        <text class='time'>{{item.time}}</text>
      </view>
      <block wx:if="{{item.is_show_right ==1}}">
        <view class='my_right'>
          <view class='page_row'>
            <text wx:if='{{!item.is_img}}' class='new_txt'>{{item.content}}</text>
            <image wx:if='{{item.is_img}}' src='{{item.content}}' class='new_imgtent'></image>
            <view wx:if='{{!item.is_img}}' class='sanjiao my'></view>
            <image class='new_img' wx:if='{{item.show_rignt == "是自己的內(nèi)容，顯示在右邊，右邊渲染 nickname_owner，head_owner"}}' src='{{item.head_owner}}'></image>
             <image class='new_img' wx:if='{{item.show_rignt == "是自己的內(nèi)容，顯示在右邊，右邊渲染 nickname_open，head_open"}}' src='{{item.head_open}}'></image>
          </view>
        </view>
      </block>
      <block wx:else>
        <view class='you_left'>
          <view class='page_row'>
            <image class='new_img' wx:if='{{item.show_rignt == "不是自己的內(nèi)容，顯示在左邊，左邊渲染 nickname_owner，head_owner"}}' src='{{item.head_owner}}'></image>
             <image class='new_img' wx:if='{{item.show_rignt == "不是自己的內(nèi)容，顯示在左邊，左邊渲染 nickname_open，head_open"}}' src='{{item.head_open}}'></image>
            <view wx:if='{{!item.is_img}}' class='sanjiao you'></view>
            <text wx:if='{{!item.is_img}}' class='new_txt'>{{item.content}}</text>
            <image wx:if='{{item.is_img}}' src='{{item.content}}' class='new_imgtent'></image>
          </view>
        </view>
      </block>
    </scroll-view>
  </view>
</view>
<view class='hei' id="hei"></view>
<view class="sendmessage">
  <input type="emoji" bindinput="bindChange" confirm-type="done" value='{{news_input_val}}' placeholder="" />
  <button catchtap="add">發(fā)送</button>
  <input style='display:none' type="" bindinput="bindChange" confirm-type="done" placeholder="" />
  <image bindtap="upimg1" class='jia_img' src='../../../images/jia_img.png'></image>
</view>```
```// pages/index/to_news/to_news.js
var app = getApp();
var util = require("../../../utils/util.js")
var message = '';
var text = '';
var user = {};
var length;
var zx_info_id;
var openid_talk;
Page({
  data: {
    news: '',
    scrollTop: 0,
    message: '',
    text: text,
    centendata: '',
    nickName: '',
    avatarUrl: '',
    news_input_val:'',
    tabdata: ''
  },
  bindChange: function (e) {
    message = e.detail.value
  },
  //事件處理函數(shù)
  add: function (e) {
    var that = this
    var data = {
      program_id: app.jtappid,
      openid: app._openid,
      zx_info_id: zx_info_id,
      content: message,
      openid_talk:openid_talk
    }
    util.request('/session_submit', 'post', data, '正在加載數(shù)據(jù)', function (res) {
      if (res.data.state == 1) {
        var a = true;
        that.loaddata(a);
        that.setData({
          news_input_val:''
        })
        message = ''
      } else {
        wx.showToast({
          title: '網(wǎng)絡(luò)錯(cuò)誤,請(qǐng)稍后',
        })
      }
    })
  },

  onLoad: function (options) {
    openid_talk = options.openid_talk;
    zx_info_id = options.zx_info_id;
    console.log(openid_talk)
    //調(diào)用應(yīng)用實(shí)例的方法獲取全局?jǐn)?shù)據(jù)
    this.setData({
      zx_info_id: zx_info_id,
      nickName: app.nickName,
      avatarUrl: app.avatarUrl,
    });
    this.loaddata()
  },
  // 頁(yè)面加載
  loaddata: function (a) {
    var that = this;
    var is_img = true;
    var data = {
      program_id: app.jtappid,
      openid: app._openid,
      zx_info_id: zx_info_id,
      openid_talk: openid_talk
    }
    util.request('/session_page', 'post', data, '', function (res) {
      if (res.data.k1) {
        res.data.k1.time_agree = util.js_date_time(res.data.k1.time_agree)
      }
      for (var i = 0; i < res.data.k2.length; i++) {
        res.data.k2[i].time = util.js_date_time(res.data.k2[i].time)
        var n = res.data.k2[i].content.charAt(res.data.k2[i].content.length - 1);
        switch (n) {
          case 'g':
            res.data.k2[i].is_img = is_img
            break;
          default:
        }
      }
      that.setData({
        tabdata: res.data.k1,
        centendata: res.data.k2.reverse()
      })
      wx.setNavigationBarTitle({ title: that.data.tabdata.nickname });
      if (a) {
        setTimeout(function () {
            that.bottom()
        }, 500);
      }
    })
    setTimeout(function () {
      if (that.data.centendata.length != length) {
        length = that.data.centendata.length
      }
      that.loaddata()
    }, 3000);
    
  },
  // 獲取hei的id節(jié)點(diǎn)然后屏幕焦點(diǎn)調(diào)轉(zhuǎn)到這個(gè)節(jié)點(diǎn)
  bottom: function () {
    var query = wx.createSelectorQuery()
    query.select('#hei').boundingClientRect()
    query.selectViewport().scrollOffset()
    query.exec(function (res) {
      wx.pageScrollTo({
        scrollTop: res[0].bottom  // #the-id節(jié)點(diǎn)的下邊界坐標(biāo)
      })
      res[1].scrollTop // 顯示區(qū)域的豎直滾動(dòng)位置
    })
  },
  // 選擇圖片并把圖片保存  
  upimg1: function () {
    var that = this;
    wx.chooseImage({
      success: function (res) {
        var data = {
          program_id: app.jtappid,
          openid: app._openid,
          zx_info_id: zx_info_id,
        }
        var tempFilePaths = res.tempFilePaths
        wx.uploadFile({
          url: '/session_submit', //提交信息至后臺(tái)
          filePath: tempFilePaths[0],
          name: 'content', //文件對(duì)應(yīng)的參數(shù)名字(key)
          formData: data,  //其它的表單信息
          success: function (res) {
            var a = true;
            that.loaddata(a);
            message = ''
          }
        })
      }
    })
  }
})```

```/* pages/index/to_news/to_news.wxss */

page {
  background-color: #f7f7f7;
}

.tab {
  padding: 20rpx 20rpx 40rpx 50rpx;
  height: 20%;
  background-color: white;
}

.tab .tent {
  font-size: 33rpx;
  margin-bottom: 30rpx;
}
.jia_img{
  height: 80rpx;
  width: 90rpx;
}
.new_imgtent{
    height: 180rpx;
  width: 190rpx;
}
.tab .fabu {
  font-size: 33rpx;
  margin-top: 30rpx;
  margin-bottom: 30rpx;
}

.xiahuaxia {
  width: 80%;
  text-align: center;
  margin: 0 auto;
  position: relative;
  top: 60rpx;
}

.time {
  text-align: center;
  padding: 5rpx 20rpx 5rpx 20rpx;
  width: 200rpx;
  font-size: 26rpx;
  background-color: #E8E8E8;
}

.new_top_txt {
  width: 50%;
  position: relative;
  top: 38rpx;
  text-align: center;
  margin: 0 auto;
  font-size: 30rpx;
  color: #787878;
  background-color: #f7f7f7;
}

/* 聊天內(nèi)容 */

.news {
  margin-top: 30rpx;
  text-align: center;
  margin-bottom: 150rpx;
}

.img_null {
  height: 60rpx;
}

.l {
  height: 5rpx;
  width: 20%;
  margin-top: 30rpx;
  color: #000;
}

/* 聊天 */

.my_right {
  float: right;
  position: relative;
  right: 40rpx;
}

.you_left {
  float: left;
  position: relative;
  left: 5rpx;
}

.new_img {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
}

.new_txt {
  width: 380rpx;
  border-radius: 7px;
  background-color: #95d4ff;
  padding: 0rpx 30rpx 0rpx 30rpx;
}

.sanjiao {
  top: 20rpx;
  position: relative;
  width: 0px;
  height: 0px;
  border-width: 10px;
  border-style: solid;
}

.my {
  border-color: transparent transparent transparent #95d4ff;
}

.you {
  border-color: transparent #95d4ff transparent transparent;
}

.sendmessage {
  background-color: white;
  width: 100%;
  position: fixed;
  bottom: 0rpx;
  display: flex;
  flex-direction: row;
}

.sendmessage input {
  width: 80%;
  height: 40px;
  background-color: white;
  line-height: 40px;
  font-size: 14px;
  border: 1px solid #d0d0d0;
  padding-left: 10px;
}

.sendmessage button {
  border: 1px solid white;
  width: 18%;
  height: 40px;
  background: #fff;
  color: #000;
  line-height: 40px;
  font-size: 14px;
}

.historycon {
  height: 90%;
  width: 100%;
  flex-direction: column;
  display: flex;
  margin-top: 100rpx;
  border-top: 0px;
}
.hei{
  margin-top: 50px;
  height: 20rpx;
}
.history {
  height: 100%;
  margin-top: 15px;
  margin: 10px;
  font-size: 14px;
  line-height: 40px;
  word-break: break-all;
}