4
收藏
评论

cover-view评论弹幕自动滚动到底部的做法

聊天每增加一条就自动滚动,上代码 此代码准确获取需要滚动的高度,解决苹果手机上的scroll-top过大导致溢出问题

在目前没有同层渲染的原生组件上加入文字、聊天、弹幕等就要用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()
},
初次分享,献丑了,如有不对的地方请各位大神多多指正,谢谢(-)。

最后一次编辑于  03-08  (未经腾讯允许,不得转载)
复制链接赞 4收藏投诉评论

6 个评论

  • 陈式坚
    陈式坚
    03-08

    建议在代码前及后面加上 ```

    03-08
    赞同 1
    回复 1
    • 黄军福
      黄军福
      03-08

      哈哈,可以有

      03-08
      回复
  • Daisy
    Daisy
    03-26

    楼主为啥要取bottom值,而不直接取节点的高度?

    03-26
    赞同
    回复 1
    • 黄军福
      黄军福
      05-02

      你可以试一下

      05-02
      回复
  • 梦影
    梦影
    05-18

    真机能实现吗

    05-18
    赞同
    回复 1
    • 黄军福
      黄军福
      06-07

      能的

      06-07
      回复