小程序
小游戏
企业微信
微信支付
扫描小程序码分享
需求:用户在横向scroll-view中输入字符串(字符串从右向左),当超出宽度时,自动向左滚动,每输入一个字符都滚动到最右侧,使最新的字符显示出来。简单说就是使字符串从右向左输入。
问题:我的方案是设置scroll-left属性,在按键监听事件最后将值设置成9999,这样虽然实现了需求,但是反应很慢,每次按键差不多1少才显示上去,如果输入快点就卡死没反应了。
思考:这种方案肯定不完美,因为要频繁触发滚动事件,应该很消耗资源,但是又没想到更好的方案。求大神解决,感激不尽
4 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
使用input不能解决吗?为啥使用scrollview呀
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
试试这样子
测试代码
正好最近开发【傻大妈计算器】小程序时,也遇到类似问题,输入数字是追加到右侧,超出屏幕宽度后,由于 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"); }); } })
最终效果如下,左侧连续输入后变成右侧
扫码体验
这个需求类似于聊天窗口的信息展示,永远在底部,你这是永远在右侧,有一个巧妙的方法,就是布局的时候设置flex的row为反向的
flex-
direction
: row-reverse
然后再setData追加数据的时候不要想尾部添加,而是向头部添加,这样就起到负负得正的效果,数据追加要以数组形式
建议提供下代码片段 看看
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
使用input不能解决吗?为啥使用scrollview呀
试试这样子
测试代码
正好最近开发【傻大妈计算器】小程序时,也遇到类似问题,输入数字是追加到右侧,超出屏幕宽度后,由于 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"); }); } })
最终效果如下,左侧连续输入后变成右侧
扫码体验
这个需求类似于聊天窗口的信息展示,永远在底部,你这是永远在右侧,有一个巧妙的方法,就是布局的时候设置flex的row为反向的
flex-
direction
: row-reverse
然后再setData追加数据的时候不要想尾部添加,而是向头部添加,这样就起到负负得正的效果,数据追加要以数组形式
建议提供下代码片段 看看