微信小程序中,存在一个多行文本框和提交按钮。提交按钮中有另一个页传来的参数值。
时间: 2023-06-16 17:05:12 浏览: 77
你可以在多行文本框的bindinput事件中,获取用户输入的文本内容,并将其存储在一个变量中。然后,在提交按钮的事件处理函数中,可以将该变量的值与另一个页传来的参数值一起提交到服务器上。
示例代码如下:
```js
// 多行文本框的bindinput事件处理函数
onInput: function(e) {
var content = e.detail.value;
this.setData({
content: content
})
},
// 提交按钮的事件处理函数
onSubmit: function() {
var content = this.data.content;
var paramValue = this.options.paramValue; // 获取另一个页传来的参数值
// 将content和paramValue提交到服务器上
// ...
}
```
其中,通过`this.options.paramValue`可以获取另一个页传来的参数值。在提交按钮的事件处理函数中,将该值与多行文本框中的文本内容一起提交到服务器上。
相关问题
微信小程序写以下代码;1.页面包含一个多行文本框,一个参数按钮。2.当多行文本框中无值且接受按钮无参数传回,则不显示任何。2.如果多行文本框中无参数但是接收按钮有参数,则在多行文本框中显示接收按钮的参数。3.如果多行文本框有参数则显示该参数
以下是微信小程序的代码实现,包含一个多行文本框和一个按钮:
```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;
}
```
微信小程序写以下小程序,1.多行文本框中如果没有值接收其他参数传来的值,如果多行文本框中有值则显示该值
可以使用 `wx:if` 来判断多行文本框中是否有值,如果没有值则显示传来的参数,如果有值则显示多行文本框中的值。
下面是一个示例代码:
```
<view>
<textarea bindinput="onInput"></textarea>
<view wx:if="{{!textValue}}">{{paramValue}}</view>
<view wx:else>{{textValue}}</view>
</view>
```
其中 `textarea` 绑定了 `bindinput` 事件,当用户在多行文本框中输入内容时,会触发 `onInput` 方法,将输入的内容保存在 `textValue` 变量中。在 `view` 中使用 `wx:if` 判断 `textValue` 是否为空,如果为空则显示传来的参数 `paramValue`,否则显示 `textValue`。