小程序：手持弹幕

效果

---

体验

小程序搜索 手持弹幕便携版 ，之前以为没有添加敏感词检验导致不能正常使用

---

主要点

• 搞清楚如何计算动画时间，时间与dom高度的关系，时间与速度滑杆的关系，以及时间与字体大小的关系
• 做的时候还挺顺的，因为思路已经想好了，之前有个版本我是把page旋转90度，然后我就傻逼了
• 这个用到了新的 input 属性 cursor-spacing='10' 这个是软键盘信息跟光标的距离，不设置的话在手机端会有点难看
• 数据绑定的也比较舒服，因为好久没有开发小程序了，有点思维上的桎梏，智力上的滑坡，反正不会就百度bing呗，多大点屁事儿呢

---

遇到的问题

获取节点信息的时机**

• 它算是重点，因为我之前设置的是在滑杆触发滑动的时间里设置动画，因为滑动一下滑杆会触发超级多的时间，所以动画一直不对
• 后来我想了想，应该是我获取时机不对的问题，所以我写了个全局的定时函数，用来3s获取dom节点的长度，然后在计算动画时间的时候直接获取，滑杆怎么动也不会关联到动画时间了

动画

这里的动画其实是 DOM 的位移，本来想用 css 来写的，发现无法动态控制

之后用 wx.createAnimation 也不太好用，最后用的 wx,animate()，因为没有类似 css3 中 animation 动画里的 infinity，所以写了个递归函数，这也是这个小程序的核心实现

获取节点信息

这里的 exec() 必须写的，但是官网的例子没写，不知道为啥。

const query = wx.createSelectorQuery().in(this)
console.log(query.select('#textDom'));
query.select('#textDom').boundingClientRect(function (res) {
  resolve(res?.height || 0)
}).exec();

---

源码

我放到 gitee 仓库上了，有需要的自行研究，禁止商用，违者必究