本文分享了在快应用中实现类似说说功能的过程，包括图片上传、说说列表渲染及回复留言的难点与解决方案。重点介绍了上传图片的调试技巧、列表渲染的注意事项以及动态更改type类型以解决结构一致性问题。
以上问题是我在写一个类似于说说功能的时候遇到的问题，
首先是发表说说，最基本的图片和内容发布，
内容文字就很简单的处理，踩一下上传图片的坑，
这个上传图片我真的很服气，我各种办法都试了，图片路径也有，就是上传必失败，
又去确认了一下，官方文档没有任何说明，如果一直返回fail函数
解决方法：关掉调试，关掉调试，那很多数据都看不到了， 打在页面上或者showtoast吧
上传图片数组上去
var picIds=[]
for(var i=0;i<_this.imgs.length;i++){
picIds[i]=(parseInt(_this.imgs[i].id))
}
var postData={
userId: _this.app.user.id,
content: _this.content,
isOpen: true,
scenesId:0,
moodValue:0,
isAnonymous:0,
pictures: picIds
}
快应用会把数组自动转换为string类型的。前端毫无办法，需要后台解析一下
上传好了，就是说说列表
上一段代码 list-item的问题 以为内容很多所以，并且有些说说有图片有些没有图片 ，有无评论啊什么的就很多节点的缺失或存在
<block for="(index,item) in list">
<list-item type="mood_item_{{index}}" if="{{!item.hide}}">
<div class="mood_item">
<div class="user_info">
<div class="friend_face" @click="goFriend(item.userId)">
<image class="friend_face"
src="{{item.isAnonymous?item.randomFaceUrl:item.faceUrl}}"
show="{{!item.userExpertId}}"></image>
<image class="friend_face"
src="{{item.expertInfo?item.expertInfo.faceUrl:''}}"
show="{{item.userExpertId}}"></image>
</div>
<div class="v_expert" show="{{item.userExpertId!=0}}">
<image src="http://oss.xqzs.cn/resources/psy/asker/header_img_v.png"></image>
</div>
</div>
<div class="content">
<div class="friend_name">
<text show="{{item.userExpertId}}" class="happy_txt_color">
{{item.expertInfo ? item.expertInfo.nickName : ''}}
</text>
<text class="bluecolor" show="{{!item.userExpertId}}">{{item.nickName}}
</text>
</div>
<div class="say_text">
<div show="{{item.showLongInt}}">
<text class="content_text">{{item.content}}</text>
<text class="more" @click="showLongInt(index)"
show="{{item.longIntroduction}}">收起
</text>
</div>
<div show="{{!item.showLongInt}}">
<text class="content_text">{{item.contentShort}}</text>
<text class="more" @click="showLongInt(index)"
show="{{item.longIntroduction}}">全文
</text>
</div>
</div>
<div class="imgList">
<div class="img1" show="{{item.pics.length == 1}}">
<image src="{{item.pics[0].smallUrl}}"
show="{{item.pics[0].smallUrl!=''}}"
@click="showBigimage(index,0,item.pics[0].bigUrl)"></image>
</div>
<div class="img2" show="{{item.pics.length == 2}}">
<image src="{{pic.smallUrl}}" show="{{pic.smallUrl!=''}}"
for="(picIndex,pic) in item.pics"
@click="showBigimage(index,picIndex,pic.bigUrl)"></image>
</div>
<div class="img3" show="{{item.pics.length == 3}}">
<image src="{{pic.smallUrl}}" show="{{pic.smallUrl!=''}}"
for="(picIndex,pic) in item.pics"
@click="showBigimage(index,picIndex,pic.bigUrl)"></image>
</div>
</div>
<div class="item_address">
<text></text>
</div>
<div class="content_info">
<text class="time">{{item.outTime}}</text>
<text class="btn_del" if="{{user.id==item.userId}}"@click="deleteMyMood(item.id,index)">删除
</text>
<div class="info_right">
<div @click="care(index)">
<text class="care_num">{{item.careCount}}</text>
<image class="care_img {{item.hit?'heartUp':''}}"
src="{{item.careImg}}"></image>
</div>
<div @click="showReply(index,-1)">
<text class="reply_num">{{item.replycount}}</text>
<image class="reply_img"
src="http://oss.xqzs.cn/resources/mood/comments.png"></image>
</div>
</div>
</div>
<div class="commont_box" show="{{item.replies && item.replies.length>0}}">
<block for="(replyIndex,reply) in item.replies">
<div class="friend_commont" @click="showReply(index,replyIndex)"
show="{{!reply.isDel && (replyIndex<3||item.showAll)}}">
<div class="name"
show="{{reply.tomoodreplyid==0||reply.tomoodreplyid==null}}">
<text show="{{reply.fromuserid==item.userId}}"
@click="goExpert(reply.from_expertId)">作者
</text>
<text show="{{reply.fromuserid!=item.userId}}"
@click="goExpert(reply.from_expertId)">
{{reply.from_nickName}}：
</text>
</div>
<div show="{{reply.tomoodreplyid != 0 && reply.tomoodreplyid!=null}}"
style="flex-direction: row">
<div class="name" @click="goExpert(reply.from_expertId)">
<text show="{{reply.fromuserid==item.userId}}">作者 回复 </text>
<text show="{{reply.fromuserid!=item.userId}}">
{{reply.from_nickName }} 回复
</text>
</div>
<div class="name" @click="goExpert(reply.to_expertId)">
<text show="{{reply.touserid==item.userId}}">作者：</text>
<text show="{{reply.touserid!=item.userId}}">
{{reply.to_nickName }}：
</text>
</div>
</div>
<div class="commont">
<text>{{reply.content}}</text>
</div>
</div>
</block>
<div if="{{item.replies && item.replies.length>3}}" class="showOthercom"
@click="showOther(index)">
<text>{{item.showordown}}</text>
</div>
</div>
</div>
</div>
</list-item>
</block>
出现渲染混乱问题，这是list组件的一个弊端
list-item内不能再嵌套listlist-item的type属性为必填属性、list-item内部需谨慎使用if指令或for指令，因为相同type属性的list-item的DOM结构必须完全相同，而使用if指令或for指令会造成DOM结构差异
调试了一早上的结构，没招了，
动态更改type类型，让他没有结构一致的问题
回复留言问题，因为是在同一个list里面的留言数组里的数据，所以用push 和splice 增加或删除自己的留言。
然后赋值一下数组，
utils.api.put('mood/reply/add', _this.replyData, function (res) {
if (res.status == 1) {
let reply = res.data.reply;
let index = _this.replyDataDom.index;
let item = _this.list[index];
if (reply.touserid === item.userId) {
reply.to_nickName = "作者";
}
item.replycount = res.data.mood.replycount;
reply.content = face.parseEmoji(reply.content);
console.log(typeof item.replies);
item.replies.push(reply);
console.log(typeof item.replies);
_this.list[index] = item;
console.log(_this.list[index])
}
})
刚开始以为是数组里面的数据结构问题，后来去创了一个简单的页面模拟最简单的数据，发现是可以的。
解决方法：数据更新完之后进行list.concat([])一下 让页面进行数据渲染响应
扫一扫
543
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
