微信小程序中简单的留言功能

WXML：

<!-- 留言--------------------------------- -->
  <view class='msg_box'>
     <view class='send_box'>
        <input value='{{inputVal}}' bindinput='changeinputVal' class='input' type='text' placeholder='请留言...' placeholder-class='pl_input'></input>
        <button class='button' type='primary' bindtap='add'>留言</button>
     </view>
     <view class='tip' wx:if='{{msgData.length==0}}'>暂无留言...^_^...</view>
     <!-- 留言列表--------------------------- -->
     <view class='msgnav'>
        <view class='msglist' wx:for="{{msgData}}" wx:key="{{index}}">
           <text class='msg'>{{item.msg}}</text>
           <icon data-index='{{index}}' bindtap='del' class='icon' type='cancel'></icon>
        </view>
     </view>
  </view>

WXSS：

.msg_box{
  padding: 10px
}
.send_box{
  display: flex;
  width: 100%;
  height: 50px
}
.input{
  border: 1px solid #aaa;
  margin-left:5px;
  border-radius:5px;
  width: 60%;
  height: 100%
}
.button{
  font-size: 16px !important;
  width: 20%;
  margin-right: 5px;
  line-height: 50px
}
.pl_input{
  color: #339999
}
.tip{
  font-size: 16px;
  width: 100%;
  text-align: center;
  margin: 10px 0 0 0;
  color: #786666
}
.msgnav{
  margin: 10px 0 0 0;
}
.msglist{
  border-bottom: 1px dashed #aaa;
  height: 30px;
  line-height: 30px;
  overflow: hidden;
  margin: 10px 10px 0 0;
}
.msg{
  float: left
}
.icon{
  float: right;
  margin: 5px 0 0 0;
}

JS：

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    inputVal:'',
    msgData:[
      {msg:'88888888888'}
    ]
  },
  // 删除留言
  del(e){
    var that=this
    var n = e.target.dataset.index;
    var list = that.data.msgData
    wx.showModal({
      title: '提示',
      content: '是否删除该条数据',
      success:function(res){
        console.log(res.confirm)
        if(res.confirm){
          list.splice(n, 1);
          that.setData({
            msgData: list
          })
          wx.showToast({
            title: '删除成功',
          })
        }
       
      }
    })
     
  },
  // 添加留言
   add(e){
    if (this.data.inputVal == '') {
      wx.showToast({
        title: '请留言',
      })
      return false;
    }
    var list=this.data.msgData;
    var a = list ? list : []
    a.push({
      msg:this.data.inputVal
    })
    wx.setStorage({
      key: 'info',
      data: a,
    })
    this.setData({
     msgData:a,
     inputVal:''
    })
  },
  changeinputVal(e){
    this.setData({
      inputVal: e.detail.value
    })
  },
    onLoad: function () {
    var that=this;
    wx.getStorage({
      key: 'info',
      success: function (res) {
        //msgData还是空的
        var list=that.data.msgData;
        var a = list ? list : []
        var apple=res.data
        //将数据加入到msgData
        a=apple
        that.setData({
          msgData: a
        })
      }
    })
  },
})