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

最新推荐文章于 2023-01-25 15:56:22 发布

前端练习生

最新推荐文章于 2023-01-25 15:56:22 发布

阅读量2.2k

点赞数 2

分类专栏：微信小程序前端文章标签：微信小程序前端

本文链接：https://blog.csdn.net/csl784513390/article/details/90671750

版权

前端同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

微信小程序

2 篇文章 0 订阅

订阅专栏

最近在学习微信小程序，要做一个仿记事本，带下划线且能自动换行在这里插入图片描述
一开始想用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输出行高，更具行高来设置，否则线还是会和字体重叠