小程序笔记(四)发表评论或者普通发帖

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/as66708/article/details/82822635

做个简单的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 //当前字数  
    });
  },

 

添加图片事件关于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) {}
      }
    });
  },

好搞定,看下效果图

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

展开阅读全文

没有更多推荐了,返回首页