在目前没有同层渲染的原生组件上加入文字、聊天、弹幕等就要用cover-view来解决了。
聊天每增加一条就自动滚动,上代码
此代码准确获取需要滚动的高度,解决苹果手机上的scroll-top过大导致溢出问题
<cover-view class=‘chat’ scroll-top="{{scrollTop}}" style=“bottom:105rpx;z-index:999999;{{!showbtn ? ‘display:none;’:‘display:block;’}}” bindtap=“hideshow”>
<cover-view id=“bianjie”>
<cover-view class=‘item’ wx:for="{{chatlist}}" wx:for-item=“record” wx:for-index=“recordid” wx:key=“index” >
<cover-view class=‘name’>{{record.nickname}}</cover-view>
<cover-view class=‘text’>{{record.content}}</cover-view>
</cover-view>
</cover-view>
</cover-view>
<button formType=“submit” class="btn-send ">发送</button>
js中处理
//发送聊天
formSubmit: function (e) {
//处理聊天内容
//设置scrollTop
this.queryMultipleNodes();
},
// 获取节点信息并设置scrollTop
queryMultipleNodes: function () {
var query = wx.createSelectorQuery(), e = this;
wx.createSelectorQuery().in(e).select(’.chat’).boundingClientRect(function (res) {
e.setData({
chatbottom: res.bottom,
})
}).exec()
query.in(e).select(’#bianjie’).boundingClientRect(function (res) {
if (res.bottom != undefined && res.bottom != ‘’ && res.bottom != null && typeof (res.bottom) != ‘undefined’) {
//var setsbottom = Math.ceil(res.bottom) ;
var setsbottom = setsbottom = Math.ceil(parseInt(res.bottom) - parseInt(e.data.chatbottom));
e.setData({ scrollTop: setsbottom });
}
}).exec()
},
初次分享,献丑了,如有不对的地方请各位大神多多指正,谢谢(-)。
建议在代码前及后面加上 ```
哈哈,可以有
为什么我这个没有效果呢
感谢感谢!!!!!!!!!!!!!
多谢楼主
真机能实现吗
能的
楼主为啥要取bottom值,而不直接取节点的高度?
你可以试一下