微信小程序防微信聊天第一版未写样式只有功能 后期完善样式

var content;

Page({

  /**
   * 页面的初始数据
   */
  data: {
    list:[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18],
    itemID:"",
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // this.scrollBottom();
  },
  onbtn(){
    var newList = [];


 
    for(var i=0;i<this.data.list.length;i++){
      newList.push(this.data.list[i])
    }
    newList[newList.length] = content;
    this.setData({
      list: newList
    })
    this.scrollBottom();


  },
  oninput(e){
    console.log(e);
    content = e.detail.value;
  },

  onfocus(){
    this.scrollBottom();
  },

//滚动到底
  scrollBottom(){
    var itemID = this.data.list.length;
    itemID = itemID-1;
    console.log(itemID);
    this.setData({
      itemID: "item"+itemID
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    
  }
})

<view class="pagebody">
  <scroll-view class="showContent" scroll-y="true"  scroll-into-view="{{itemID}}">
    <view class="list" wx:for="{{list}}" wx:key="{{index}}" id="item{{index}}">
      {{item}}
    </view>
  </scroll-view>
  <view class="bottom">
    <input placeholder="输入内容" bindfocus="onfocus" bindinput="oninput"></input>


    <button class="" type="warn" bindtap="onbtn">发送
    </button>
  </view>
</view>

.pagebody{
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
}
.showContent{
  flex: 1;
  overflow: hidden;
}

.bottom{
  height: 100rpx;
  background: greenyellow;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0 40rpx;

}
.bottom input{
  height: 100rpx;

}
.list{
  height: 80rpx;
  text-align: center;
  line-height: 80rpx;
}
button{
  margin: 0;
}