微信小程序仿记事本，带下划线，自动换行,高度自增

最近在学习微信小程序，要做一个仿记事本，带下划线且能自动换行
一开始想用input添加border，加js来实现，但是很麻烦，后面将所有文字累加成字符串以及自动换行都不好做。
后来决定用textarea，实现换行和文本提交方便，下划线使用css的 background: repeating-linear-gradient(#fff,#fff 70rpx ,#000 72rpx);模拟下滑线

但是字多的时候，拖动会导致下划线不能跟着字滚动，解决办法是给定行高。代码如下

/*wxss*/
.section{
  height: 75%;
  width:80%;
  left: 10%;
  top:10%;
  position: absolute;
  line-height: 72rpx;
  overflow: scroll;
  font-size: 60rpx; 
  /* text-decoration-line: underline; */
}
.text{
  text-decoration-line: underline;
  position: absolute;
  width: 100%;
  background: repeating-linear-gradient(#fff,#fff 70rpx ,#000 72rpx);
}

/*wxml */
<view class="box">
<image class='background' src="../../Resources/5.28-1.png" mode="scaleToFill"></image>
<form bindsubmit='formsubmit'>
<view class="section" >
   <textarea class="text" maxlength="-1" placeholder="编辑会议记录" auto-height='true' name="record" auto-focus='true'/>
 </view>
 
 <button form-type='submit' class="sub">完成 </button>
  </form>

</view>

注意： 行高和linear-gradient的高度不是随便设的，可以在textarea中使用bindlinechange输出行高，更具行高来设置，否则线还是会和字体重叠