1. 程式人生 > >小程式筆記(四)發表評論或者普通發帖

小程式筆記(四)發表評論或者普通發帖

做個簡單的wxml頁面

<view class='by'>
  <view class='sct'>發表您的評論</view>
  <view class='sccv'>
    <textarea placeholder='請輸入評論內容' minlength="{{min}}" maxlength="{{max}}" class='scct'  bindinput='inp'></textarea>
    <text class='scm' >{{texts}}</text>
    <text class='ctn' >{{currentWordNumber}}/{{max}}</text>
  </view>
  <view class='ctit' >上傳圖片<text>(長按圖片刪除)</text><text >{{imn}}/{{immax}}</text></view>
  <view class='ci' >
    <block wx:for="{{images}}">
      <image src='{{item}}' data-in='{{[index]}}' class='cimage'  mode='widthFix' bindlongtap='dimage'></image>
    </block>
    <image src='../../image/icon/upl.png' class='cimage'  mode='widthFix' bindtap='chose'></image>
  </view>
  <view style='background:white;font-size: 30rpx;color: #03bc03;padding:0 0 0 2%;'>{{em}}</view>
  <view style='background:white;' wx:if="{{fail!=0}}" >失敗{{fail}}個</view>
  <view class='vbt' >
    <view class='vbtc' bindtap='cancel'>取消</view>
    <view class='vbts' bindtap='save'>儲存</view>
  </view>
</view>

頁面大致這個樣子

小的美術不行望看官們見諒

完後就是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 //當前字數  
    });
  },

 

  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) {}
      }
    });
  },

好搞定,看下效果圖

 就是這樣子,可能小的美術不好,有點難看,希望不要介意