个人中心 | 微信开放社区

联系一下主体

[图片]

04-03

可以试一下锚点

聊天窗口，如何才能够在进入聊天页面时，像微信聊天一样，直接在页面底部看到最新的消息？

大家好！我这几天在做一个聊天的功能，遇到了一个问题：每次进入聊天页面，聊天的消息都是从最上面的最旧消息开始显示，需要手动下滑到最底部查看最新消息，所以，请问一下，如何才能够在进入聊天页面时，像微信聊天一样，直接在页面底部看到最新的消息？是需要在wxml页面还是wxss页面设置？设置哪一项？非常感谢！ [图片] wxml页面代码： <block class="overflow"> <view wx:for="{{messageList}}" wx:key="messageList"> <view class="rightBox" wx:if="{{item.openId === visitorId}}" data-msg="{{index}}" id='msg_{{index}}'> <view> <view class="createTime_R">{{item.createTime}}</view> <view class="right_message" wx:if="{{item.type=='text'}}">{{item.content}}</view> <image src="{{item.content}}" wx:if="{{item.type=='image'}}" class="image_content" mode="widthFix" bindlongpress="tp_save_img" data-fileid="{{item.content}}"/> </view> <image class="icon" src="{{icon_R}}" mode="widthFix" style="width: 100rpx; height: 80rpx;" /> </view> <view class="leftBox" wx:if="{{item.openId === serverId}}" data-msg="{{index}}" id='msg_{{index}}'> <image class="icon" src="{{icon_L}}" mode="widthFix" style="width: 100rpx; height: 80rpx;" /> <view> <view class="createTime_L">{{item.createTime}}</view> <view class="left_message" wx:if="{{item.type=='text'}}">{{item.content}} </view> <image src="{{item.content}}" wx:if="{{item.type=='image'}}" class="image_content" mode="widthFix" bindlongpress="tp_save_img" data-fileid="{{item.content}}"/> </view> </view> </view> <view class="overflow_a"> </view> </block> <view class="sends"> <image class="sends_a" src="{{imgUrl}}" bind:tap="sendImage" /> <textarea class="sends_b" type="text" maxlength="-1" bindblur="message_blur" auto-height="true" value="{{content}}"></textarea> <view class="sends_c" bind:tap="send">发送</view> </view> wxss页面代码： page { padding-top: 20rpx; padding-bottom: 20rpx; } .overflow{ position: fixed; top: 300rpx; width: 710rpx; overflow: scroll; /*auto hidden scroll*/ } .overflow_a{ margin-bottom: 110rpx; } .sends{ display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: flex-start; height: 100rpx; position: fixed; bottom: 0rpx; left: 0rpx; background-color: white; } .sends_a{ width: 60rpx; height: 50rpx; margin: 0rpx 20rpx; } .sends_b{ width: 500rpx; border: solid black 1rpx; border-radius: 10rpx; margin: 0rpx 20rpx 0rpx 0rpx; } .sends_c{ padding: 10rpx 30rpx; } .icon{ margin: 10rpx 0rpx 0rpx 0rpx; } .rightBox{ display: flex; flex-direction: row; align-items: center; justify-content: flex-end; margin: 10rpx 20rpx 0rpx 0rpx; } .leftBox{ display: flex; flex-direction: row; align-items: center; justify-content: flex-start; margin: 10rpx 0rpx 0rpx 20rpx; } .right_message{ width: 600rpx; text-align: right; padding: 0rpx 10rpx; } .left_message{ width: 600rpx; text-align: left; padding: 0rpx 10rpx; } .image_content{ width: 600rpx; } .createTime_L{ font-size: x-small; text-align: center; } .createTime_R{ font-size: xx-small; text-align: center; } js页面代码： onLoad(){ let that = this; let title = wx.getStorageSync('from'); that.setData({ title, }); let visitorId=''; //来访者的openid let serverId=''; //客服的openid let my_openId = app.globalData.user_data.openid; //拿到本人的openid let visitor_Id = wx.getStorageSync('visitor_Id'); //拿到来访者的openid，可能为空 if (my_openId == "oi6wV5Gn558x5madg" || my_openId == "oi6wV5qMAYQmm8To") { //识别出本人的openid是客服人员时 serverId = my_openId; //本人的openid赋值给serverId，即赋值给客服id visitorId = visitor_Id; //对方的openid赋值给来访者的openid } else { //识别出本人是来访者时 if (title=="法律咨询") { serverId = "oi6wV558x5madg"; //对客服的openid赋值 visitorId = my_openId; //将本人的openid赋值给来访者 } else if (title=="能力提升") { serverId = "oi6wV5HGqMAYQmm8To"; //对客服的openid赋值 visitorId = my_openId; //将本人的openid赋值给来访者 } else if (title=="心理咨询") { serverId = "oi6wV5HGMSMAYQmm8To"; //对客服的openid赋值 visitorId = my_openId; //将本人的openid赋值给来访者 }; }; that.setData({ serverId, visitorId, }); wx.cloud.callFunction({ //这里调用云函数查询对话 name:"messageList", data:{ $url:"message", //云函数路由参数 visitorId:visitorId, //本人的openid serverId:serverId, //客服的openid } }).then(res=>{ let arr = res.result.data; // console.log("arr:",arr); let userInfo = { //app.globalData.user_data; 就是来访者的个人信息 gender:app.globalData.user_data.gender, id_name:app.globalData.user_data.id_name, openid:app.globalData.user_data.openid, phone_no:app.globalData.user_data.phone_no, orgaId:app.globalData.user_data.orgaId, orgaName:app.globalData.user_data.orgaName, unitId:app.globalData.user_data.unitId, unitName:app.globalData.user_data.unitName, user_name:app.globalData.user_data.user_name, }; if(arr.length === 0){ //进行判断，如果没有数据则创建一个聊天 wx.cloud.database().collection("message") .add({ data:{ Message:[], serverId, userInfo, }} ) } }); }, onReady: function () { let that = this; let visitorId = that.data.visitorId; //本人的openid，来访者 let serverId = that.data.serverId; //客服的openid let watch = db.collection('message') .where({ _openid:_.eq(visitorId), serverId:_.eq(serverId), }) .watch({ onChange: (snapshot)=> { //只要数据发生变化就会调用此方法 that.setData({ messageList:snapshot.docs[0].Message, //将最新的聊天数据放到data中渲染 }); console.log("onReady:",snapshot.docs[0].Message); }, onError: function(err) { console.error('the watch closed because of error', err) } }); },

03-08

换个浏览器，看下网络正常否

小程序迁移无法生成二维码

[图片]

03-08

代码不全，你获取到array，用的遍历渲染吗

为什么数据获取成功，但是显示不了？

[图片][图片] [图片]

03-08

不是说了余额不足

{ "errcode": 10025005, "errmsg": "电子面单取号失败，请参考deli

{"errcode": 10025005, "errmsg": "电子面单取号失败，请参考delivery_error_msg字段后重试 rid: 65e884d1-6ef185cc-773115e3", "delivery_error_msg": "获取电子面单失败,具体原因：账户余额不足" }