小程式筆記(四)發表評論或者普通發帖
阿新 • • 發佈:2018-12-11
做個簡單的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) {}
}
});
},
好搞定,看下效果圖
就是這樣子,可能小的美術不好,有點難看,希望不要介意