zoukankan      html  css  js  c++  java
  • 微信小程序scroll-view滚动到最底部

    实现scroll-view自动滚动到最底部

    原理: 1.使用scroll-view的scroll-into-view (值应为某子元素id)

                2. scroll-view最后加入一个text元素

                3. 需要跳转到最底部时,将text的id值改变为一个新值,然后在settimeout中将scroll-into-view值改为text的新id值

    适用场景: scroll-view中内容变化没有规律,不是一条一条新增的。如下面的例子是显示语音识别后的文字,用户在录音时,语音识别后的文字一直加入在此区域中,想让用户看到最新的识别文字,就需要把滚动区域滚动到最底部。

    其他: 如果新增内容为一条一条的列表,完全可以使用列表的id值,不需要用这样的方法

    html

    <scroll-view :scroll-into-view="recognitionnow" :scroll-y="true" >
      <view v-html="text"></view>
      <text :id="'recognition' + pagetop"></text>
    </scroll-view>

    data中数据: 

     pagetop: 0,

     text: "",
     recognitionnow: "recognition0"

    js逻辑 (伪代码)

    ajax(res=> {
      this.text = res.data;
      this.pagetop++;
      setTimeout(() => {
        this.recognitionnow = "recognition" + this.pagetop;
      })
    });

  • 相关阅读:
    Hadoop2.0 HA集群搭建步骤
    了解何为DML、DDL、DCL
    搭建Hadoop平台(新手入门)
    周记1
    IT小小鸟
    Python中的函数修饰符
    python_类方法和静态方法
    Python的log模块日志写两遍的问题
    python——装饰器例子一个
    初识HIVE
  • 原文地址:https://www.cnblogs.com/sgqwjr/p/13398142.html
Copyright © 2011-2022 走看看