微信小程序开发——textarea中示例文案的实现（方法二）

在textarea的placeholder（占位符）中使用'\n'无法显示换行，而text元素中可以使用'\n'与'键盘上的Enter'来换行。

可以通过 text 元素与固定定位（position: absolute;）来实现textarea中的示例文案。

textarea元素的高度设置为自增（auto-height），其最小高度为示例文案的高度（行数*行高）

wxml部分

<view class="wrapper">
  <textarea class="textarea " value="{{content}}" bindinput="bindinput" maxlength="1000" auto-focus="true" auto-height="true"></textarea>
  <text class="placeholder" wx:if="{{!content}}" >建议填写技能对应的服务性产品，以固定的服务时长为计价单位，对服务描述得越清晰有助于邻居尽快预约您的服务。\n\n例如：本人从事阅读推广10多年，有开过亲子阅读工作室，擅长带领亲子家庭进行绘本阅读及戏剧游戏体验，多样化的阅读体验，培养孩子的阅读及表达表演兴趣，同时可启发家长进行科学阅读。\n产品适用规模：5-12户亲子家庭最佳\n产品适合对象：4-7周岁亲子家庭</text>
</view>

wxss部分

.wrapper{
  width: 100%;
  padding: 32rpx;
  position: relative;
  box-sizing: border-box;
}
.textarea {
  margin: auto;
  padding: 32rpx;
  box-sizing: content-box;
   /*文本内容的宽度 */
  width: 622rpx;
   /*文本内容的高度  等于 content中提示文案的行数*行高 */
  min-height: 448.8rpx;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  font-size: 32rpx;
  font-weight: 400;
  /* 行高  可以根据 bindlinechange 中的e.detail.lineHeigth 可以得到 */
  line-height: 40.8rxp;
  border: 1rpx solid #cccccc;
  border-radius: 16rpx;
  background-color: #F7F9FD;
}

.placeholder {
  margin: 0;
  padding: 0;
  width: 622rpx;
  display: block;
  font-size: 32rpx;
  color: #878787;
  box-sizing: border-box;
  line-height: 40.8rpx;
  /*设置固定定位 */
  position: absolute;
  /* .wrapper的 padding-top：32rpx 加 .textarea的 padding-top：32rpx  */
  top: 64rpx; 
  right: 64rpx;
  left: 64rpx;
}

js部分

const app = getApp()

Page({
  data: {
    content:''
  },
  bindinput(e){
    this.setData({
      content:e.detail.value
    })
  }

})