微信小程序写以下代码;1.页面包含一个多行文本框,一个参数按钮。2.当多行文本框中无值且接受按钮无参数传回,则不显示任何。2.如果多行文本框中无参数但是接收按钮有参数,则在多行文本框中显示接收按钮的参数。3.如果多行文本框有参数则显示该参数
时间: 2023-06-16 07:04:30 浏览: 97
以下是微信小程序的代码实现,包含一个多行文本框和一个按钮:
```html
<view class="container">
<textarea class="input" bindinput="onInput">{{inputValue}}</textarea>
<button class="btn" bindtap="onTap">{{btnValue}}</button>
</view>
```
在对应的JS文件中,我们需要定义多个变量来控制页面的显示:
```javascript
Page({
data: {
inputValue: '', // 多行文本框中的值
btnValue: '', // 按钮传递的参数
displayInput: false // 是否显示多行文本框
},
// 监听多行文本框输入事件
onInput: function(e) {
// 更新多行文本框中的值
this.setData({
inputValue: e.detail.value,
displayInput: true // 显示多行文本框
});
},
// 监听按钮点击事件
onTap: function() {
// 如果多行文本框有值,则显示该值
if (this.data.inputValue) {
wx.showToast({
title: this.data.inputValue,
icon: 'none'
});
} else if (this.data.btnValue) { // 如果多行文本框没有值但是按钮有参数,则显示该参数
wx.showToast({
title: this.data.btnValue,
icon: 'none'
});
} else { // 如果多行文本框和按钮都没有参数,则不显示任何信息
this.setData({
displayInput: false
});
}
}
});
```
在CSS文件中,可以设置多行文本框和按钮的样式:
```css
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
.input {
width: 80%;
height: 150rpx;
margin-bottom: 20rpx;
padding: 20rpx;
border: 1rpx solid #ccc;
border-radius: 5rpx;
font-size: 28rpx;
}
.btn {
width: 200rpx;
height: 80rpx;
border-radius: 5rpx;
background-color: #4caf50;
color: #fff;
font-size: 32rpx;
}
```
阅读全文