小程序笔记（四）发表评论或者普通发帖

做个简单的wxml页面

  发表您的评论
  
    
    {{texts}}
    {{currentWordNumber}}/{{max}}
  
  上传图片（长按图片删除）{{imn}}/{{immax}}
  
    
      
    
    
  
  {{em}}
  失败{{fail}}个
  
    取消
    保存
  

页面大致这个样子

小的美术不行望看官们见谅

完后就是js了，这里实现了限制字数，字数实时提醒，上传图片

bindinput事件

  inp: function(e) {
    var _this = this;
    var value = e.detail.value;
    _this.setData({
      value: value,
    })
    var len = parseInt(value.length);

    if (len <= this.data.min)
      this.setData({
        texts: "加油，3个字不是很多"
      })
    else if (len > this.data.min)
      this.setData({
        texts: " "
      })
    if (len > this.data.max) return;
    this.setData({
      currentWordNumber: len //当前字数  
    });
  },

 

添加图片事件关于comm.js上篇小程序笔记（三）模仿企鹅社区给予用户，灵活发帖展示自我的操作有说

  chose: function() {
    var _this = this;
    var imagesc = _this.data.images;
    comm.choosephoto().then(function(res) {
      if ((imagesc.length + res.tempFilePaths.length) <= _this.data.immax) {
        for (var i = 0; i < res.tempFilePaths.length; i++) {
          imagesv.push(res.tempFilePaths[i]);
        }
        _this.setData({
          images: imagesc.concat(imagesv),
          imn: Number(imagesc.length) + Number(res.tempFilePaths.length),
          em: "",
        });
        imagesv = [];
      } else {
        _this.setData({
          em: "最多上传" + _this.data.immax + "张图片",
        })
      }
    });
  },

长按删除事件

dimage: function(e) {
    var _this = this;
    imagesv = [];
    var images = _this.data.images;
    var imn = _this.data.imn;
    wx.showModal({
      title: '提示',
      content: '确认删除图片吗',
      success: function(res) {
        if (res.confirm) {
          images.splice(e.currentTarget.dataset.in[0], 1);
          _this.setData({
            images: images,
            imn: imn - 1,
          })
        } else if (res.cancel) {}
      }
    });
  },

好搞定，看下效果图

 就是这样子，可能小的美术不好，有点难看，希望不要介意