前段时间遇到了一个微信小程序关于textarea的需求，需要给textarea添加背景，并且背景是会跟随文字的滚动而滚动，如下图所示：
我的方法是给textarea添加背景图片，然后控制行高，让行高和背景图虚线大致相同，看起来的效果就像是直接写在这些横线上。 有两种实现的思路：
- textarea的高度固定，图片被固定跟着内容一起滚动
- 内容不滚动，整个textarea滚动，这就需要动态设置textare的高度
textarea的高度固定，图片被固定跟着内容一起滚动
这个效果可以直接使用css来实现，background-attachment: local; 这个属性在pc上是可以实现背景图固定内容多的时候图跟着文字一起滚动。
但是在小程序上面是没有效果的，图片还是会固定在那里，看起来的效果就像是 background-attachment: scroll; 所以就直接放弃了这种实现方式。
内容不滚动，整个textarea滚动，这就需要动态设置textare的高度
就只能给textarea动态设置高度，但是这里还要注意，因为teatarea是有一个默认高度在的，就需要去判断默认高度和文字高度的大小，需不需要增加textarea的高度以达到不让内容滚动的效果。
这就需要用的微信小程序的textarea中的linechange事件，这个事件的作用是：输入框行数变化时调用，返回值是：event.detail = {height: 0, heightRpx: 0, lineCount: 0}。 但是不能直接使用linechange的返回值，因为他返回的linecount是不准确的，直接用来做行数判断是不可以的，所以就要在linechange事件中自己做行判断。
通过实例获取设置高度
通过 wx.createSelectorQuery().in(this) 获取到textarea的实例，在实例上获取到textarea的高度，再让 Math.round(textarea高度/行高) * 行高 这样是为了保证不会有半行的情况出现，文字输入后textarea显示的内容都是整行的。
但是这样做出来也是有弊端在的，当内容输入很多再删除后，textarea不会根据行数的减少而降低高度，换而言之高度只能增加不能减少。
通过隐藏的元素同步高度
那么还有一个办法就是设置一个view元素专门用于放textarea的内容，通过设置样式后讲textarea的内容放入view中，动态获取这个元素的高度，再将高度同步设置给textarea，这样就能保证textarea会根据文本内容的高度而改变自身的高度。
如果大家有什么更好的方法欢迎在下面交流
