评论

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()
},
初次分享,献丑了,如有不对的地方请各位大神多多指正,谢谢(-)。

最后一次编辑于  2019-03-08  
点赞 6
收藏
评论

6 个评论

  • 陈式坚
    陈式坚
    2019-03-08

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

    2019-03-08
    赞同 1
    回复 3
    • 福
      2019-03-08

      哈哈,可以有

      2019-03-08
      回复
    • 小昌
      小昌
      2020-05-07回复
      scroll-top动态赋值为什么失败呀?没有实时更新
      2020-05-07
      回复
    • 你今天真好看
      你今天真好看
      2020-08-13回复小昌
      想请教一下这个聊天滚动怎么做的哦,
      2020-08-13
      回复
  • 你今天真好看
    你今天真好看
    2020-08-13

    为什么我这个没有效果呢

    2020-08-13
    赞同
    回复
  • Helberrrt
    Helberrrt
    2020-03-20

    感谢感谢!!!!!!!!!!!!!

    2020-03-20
    赞同
    回复
  • 雅兰
    雅兰
    2020-03-10

    多谢楼主

    2020-03-10
    赞同
    回复
  • 梦影
    梦影
    2019-05-18

    真机能实现吗

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

      能的

      2019-06-07
      回复
  • Daisy
    Daisy
    2019-03-26

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

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

      你可以试一下

      2019-05-02
      回复
登录 后发表内容