最近上头说做一个社区给用户发帖讨论分享信息,做一个本地区社区,其实是在这个社区上捆定集团事业部的各大产业(物流,仓库,搞在一起,还想搞大吞并某其他事业部的产业),不算得上真正的地区社区。
然后就查下网上的社区是什么样发帖的,不过大多数都是这样上面文字下面图就如此简单,
但是我想这个真的有点简单,后来我发现了马总的企鹅很牛所以就模仿下
我觉得这才是发帖,就像ppt一样图片中夹渣这文字才生动有趣。
上面的不难重要的是下面的+号,他可以在任意位置插入图片或者文字,非常骚
其实实现这个操作不难就是对javascript的splice()这个方法进行操作
不多废话直接开始
先做个页面吧比较简陋
<view style='width:100%;font-size:50rpx;text-align: center;margin:10rpx 0 50rpx 0;' wx:if="{{images.length==0}}" data-idx='-1' bindtap='add'>添加图片</view>
<block wx:for="{{images}}">
<view data-id='{{index}}' bindlongtap='de'>
<view class='ge'></view>
<view class='biv'>
<view class='iv'>
<image src='{{item.url}}' style='width:95%;' mode='widthFix'></image>
</view>
<view class='it'>
<textarea class='t' maxlength="200" placeholder="添加图片描述..." value='{{item.describes}}' data-url='{{item.url}}' data-id="{{index}}" bindinput='idescribes'></textarea>
</view>
</view>
<view class='add' data-idx='{{index}}' bindtap='add'>+</view>
</view>
</block>
然后就是js
var comm = require("../../utils/comm.js");
data: {
images:[],
},
comm是我抽取出去的一个反复使用的微信api如这个选择图片如获取openid登录
var util = require('/util.js');
function choosephoto() {
var c = util.wxPromise(wx.chooseImage);
return c({
sizeType: ['original', 'compressed'],
sourceType: ['camera', 'album'],
}).then(function(res) {
return Promise.resolve(res);
}).catch(function(err) {
console.log(err)
return Promise.reject(err)
});
}
module.exports = {
choosephoto: choosephoto,
}
点击添加事件
add:function(e){
var _this=this;
var cb = _this.data.images;
var a = e.currentTarget.dataset.idx;
comm.choosephoto().then(function (res) {
cb.splice(Number(a) + 1, 0, {
url: res.tempFilePaths[0],
describes: '',
})
_this.setData({
images:cb,
})
})
/**/
},
添加时间完成
再加个长按删除事件
de:function(e){
var _this=this;
var cb=_this.data.images;
var a = e.currentTarget.dataset.id;
wx.showModal({
title: '提示',
content: '确认删除图片吗',
success: function (res) {
if (res.confirm) {
cb.splice(a, 1)
_this.setData({
images: cb,
})
} else if (res.cancel) {}
}
});
},
然后就这么简单
效果图
点击添加图片
再点击加号
再点击中间的加号在他们中间插一张图片
提示下,这些图片都没有上传的都是在data.image里面到时循环这个js方法上传,没办法小程序不可以一次性上传所以也是只能循环上传了,由于多个地方用到所以抽取出到comm.js哪里
function ul(url,file,filename,param){
var u = util.wxPromise(wx.uploadFile);
return u({
url: url,
filePath: file,
name: filename,
formData: param,
}).then(function(res){
return Promise.resolve(res)
}).catch(function(err){
consoel.log(err)
return Promise.reject(err)
});
}
发帖时循环就是了,注意小程序小坑,他返回信息的是字符串,所以要自己转换下json,JSON.parse(res),还有注意数字向加时加个Number套着,否则的话就是字符串相加了, Number(_this.data.fn) + 1
for (var i = 0; i < _this.data.images.length; i++) {
console.log(i)
comm.ul(ports.wx_icimg, _this.data.images[i].url, 'file', {参数}).then(function (res) { var data = JSON.parse(res); if (data.status == 1) { _this.setData({ fn: Number(_this.data.fn) + 1 }) } }).catch(function (errr) { console.log(err) })
}
该功能就是对splice()方法的熟练操作。其实这个方法挺好玩的。