小程序怎么实现输入框随着输入字体高度变化 在微信小程序中,利用()属性设置字体加粗

文章摘要：小程序怎么实现输入框随着输入字体高度变化 在微信小程序中,利用()属性设置字体加粗

小程序实现输入框随着输入字体高度变化的方法：1.创建微信小程序项目；2.在index.wxml文件中添加页面设 […]

小程序实现输入框随着输入字体高度变化的方法：1.创建微信小程序项目；2.在index.wxml文件中添加页面设计代码；3.在index.wxss文件中添加输入框样式代码；4.在index.js文件中添加效果实现代码；5.保存编辑的代码并进行调试即可。

具体操作步骤如下：

1、首先在创建一个微信小程序项目。

2、在pages包下的index目录中index.wxml文件里添加页面设计代码，使用<button>来实现一个简单的输入框。

<view class="text-box">

  <text>{{currentInput}}</text>

  <textarea class="weui-textarea" placeholder="请输入文本" bindinput="getInput" maxlength="1000" />

</view>

3、在pages包下的index目录中index.wxss文件里添加输入框样式代码。

.text-box {

  width: 100%;

  position: relative;

  min-height: 80rpx;

  margin-top: 17rpx;

  margin-left: 17rpx;

  }

  .text-box text {

  display: block;

  visibility: hidden;/*元素不可见*/

  word-break: break-all;

  word-wrap: break-word;

  }

  .text-box .weui-textarea {

  height: 100%;

  position: absolute;

  left: 0;

  top: 0;

  overflow-y: hidden;

  word-break: break-all;/*换行*/

  word-wrap: break-word;/*换行*/

  border: 1rpx solid black;

  }

4、再通过pages包下的index目录中index.js文件添加交互代码来实现输入框随着输入字体高度变化的效果。

Page({

  data: {

  currentInput: ''

  },

  getInput: function (e) {

  this.setData({

  currentInput: e.detail.value

  })

  }

  })

5、最后保存编辑的代码进行调试，保存快捷键【Ctrl+S】。

在开发工具左侧即可看到设计效果，输入文字前的效果：

输入文字之后的效果，如果随着输入框随着输入字体高度变化，说明设置成功。