c***@163.com
c***@163.com
  • 发布:2020-05-07 17:21
  • 更新:2020-05-07 18:01
  • 阅读:2909

使用nvue开发聊天界面,如何让页面进入时自动滚到底部?

分类:nvue

聊天列表用nvue的list+cell实现
默认进入页面时会加载15条聊天记录 一般来说会超出屏幕高度,此时希望进入页面即滚动到底部,类似微信聊天

使用uni.pageScrollTo 无效果

求助 该使用什么才能达到该效果

2020-05-07 17:21 负责人:无 分享
已邀请:
联合

联合

这个可以利用cell的ref特殊性。加上weex的滚动dom来使绑定的ref滚动,可以使用多个cell的ref,只要求滚动到底部的话可以用一个空的cell内容作为底部,来绑定ref 具体的weex dom 的滚动可以去weex的https://weex.apache.org/zh/docs/modules/dom.html#scrolltoelement 里面有案例的

  • c***@163.com (作者)

    非常感谢。用您提供的方案可以实现。

    不过唯一的缺点是没有办法实现类似微信进去就固定在底部的效果,而是要有一个显著的滚动(最坑的是必须设置延时,保证cell都渲染完了再滚动,否则也无法滚动)。最后的效果和腾讯云im的微信小程序效果差不多,进入聊天页面延时很短时间然后滚至页面底部。如果能像android listview那样直接具备从下往上渲染的能力,效果肯定就好多了

    2020-05-11 22:44

  • 极星123

    回复 c***@163.com: 使用都dom模块,

    nvue页面中

    app-nvue:

    如:

    // #ifdef APP-NVUE

    const dom = weex.requireModule('dom')

    dom.scrollToElement(this.$refs.xxxx, {})

    // #endif


    微信小程序:

    如:

    uni.pageScrollTo({

    scrollTop: scrollTop,

    duration: 300

    });

    注:scrollTop为负值,可以这样写:scrollTop = -Math.abs(scrollTop)

    2020-08-15 15:36

  • 1***@qq.com

    回复 c***@163.com: 你把dom.scrollToElement 这个属性animated: false 动画关闭就行了

    2020-08-19 18:16

  • s***@163.com

    回复 c***@163.com: 你好想问你怎么解决的

    2021-01-25 12:10

  • 阿楞先生

    回复 极星123: 铁子,给你补充一下,dom.scrollToElement(this.$refs.xxxx[0], {}) 多了个[0],这样才有效,原理我不知道,我是狗子,希望大家少爬坑

    2021-11-15 18:09

该问题目前已经被锁定, 无法添加新回复