收藏
回答

横向scroll-view输入字符串超出宽度如何自动滚动到最右边?

需求:用户在横向scroll-view中输入字符串(字符串从右向左),当超出宽度时,自动向左滚动,每输入一个字符都滚动到最右侧,使最新的字符显示出来。简单说就是使字符串从右向左输入。


问题:我的方案是设置scroll-left属性,在按键监听事件最后将值设置成9999,这样虽然实现了需求,但是反应很慢,每次按键差不多1少才显示上去,如果输入快点就卡死没反应了。

思考:这种方案肯定不完美,因为要频繁触发滚动事件,应该很消耗资源,但是又没想到更好的方案。求大神解决,感激不尽

     


回答关注问题邀请回答
收藏

4 个回答

  • 中文测试
    中文测试
    2019-08-26

    使用input不能解决吗?为啥使用scrollview呀

    2019-08-26
    有用 1
    回复 3
    • phoenixor
      phoenixor
      2019-08-26
      input我也度过,使用手机虚拟键盘输入是可以达到我的需求的,但是我的小程序是通过自定义按钮输入的,这样input无法自动滚动,你可以试试
      2019-08-26
      回复
    • 中文测试
      中文测试
      2019-08-27回复phoenixor

      试试这样子

      测试代码

      2019-08-27
      回复
    • phoenixor
      phoenixor
      2019-08-27回复中文测试
      首先感谢你提供的代码,但是效果不是我要的。我需要从右向左输入,你是相反的,另外如果连续快速输入,你的滚动跟不上,跟我现在的情况一样,总是感觉慢半拍
      2019-08-27
      回复
  • 右耳朵猫
    右耳朵猫
    2023-11-23

    正好最近开发【傻大妈计算器】小程序时,也遇到类似问题,输入数字是追加到右侧,超出屏幕宽度后,由于 scroll-view 不会自动滚动到最右侧,导致无法看到新输入的数字,需要手动滚动到右侧。最初也尝试了楼主的办法,性能比较差,输入会出现卡顿。经过一顿摸索后,找到了一个比较巧妙的方法,即可实现自动滚动到右侧,又可以保持较高的性能。

    实现思路

    在输入内容的末尾添加一个隐藏的锚点,每当输入内容时,通过 scroll-into-view 定位到该锚点,这个是 scroll-view 自身提供的属性,相比 scroll-left 具备更好的性能和准确性。

    demo.xml

      {{content}}
    


    demo.wxss

    #result {
        // 内容右对齐,保证新输入的内容从最右侧追加
        text-align: right;
    }
    


    demo.js

    Page({
      onContentChange: function(event) {
        wx.createSelectorQuery()
            .select("#result-area")
            .node()
            .exec(([node]) => {
                node.scrollIntoView("#expr-anchor");
            });
      }
    })
    


    最终效果如下,左侧连续输入后变成右侧

    扫码体验

    2023-11-23
    有用
    回复
  • 老鱼
    老鱼
    2019-08-27

    这个需求类似于聊天窗口的信息展示,永远在底部,你这是永远在右侧,有一个巧妙的方法,就是布局的时候设置flex的row为反向的

    flex-direction: row-reverse

    然后再setData追加数据的时候不要想尾部添加,而是向头部添加,这样就起到负负得正的效果,数据追加要以数组形式

    2019-08-27
    有用
    回复 2
    • phoenixor
      phoenixor
      2019-08-27
      你这个方案挺新颖啊,我怎么没想到,今晚试试先
      2019-08-27
      回复
    • 愚者
      愚者
      07-24
      🐂
      07-24
      回复
  • 云袋科技
    云袋科技
    2019-08-25

    建议提供下代码片段 看看

    2019-08-25
    有用
    回复 1
    • phoenixor
      phoenixor
      2019-08-25
      js代码吗?就是在按键监听器最后使用this.setData给scroll-top属性赋值9999,每次按键都向右滚动到头
      2019-08-25
      回复
登录 后发表内容
问题标签