微信小程序写以下程序,主页面中包含一个多行文本框和一个页面跳转按钮,如果多行文本框为空,且页面跳转未传值过来则显示默认字体,如果多行文本框未输入值,但页面跳转按钮传值过来了则多行文本框显示页面传递过来的值,如果多行文本框有值且页面传值了则显示多行文本框中的值
时间: 2023-06-18 08:02:10 浏览: 129
微信小程序 页面跳转及数据传递详解
好的,以下是微信小程序的代码实现:
主页面 wxml 文件:
```
<view class="container">
<textarea value="{{textValue}}" bindinput="onInput"></textarea>
<button class="btn" bindtap="navigateTo">页面跳转</button>
</view>
```
主页面 js 文件:
```
Page({
data: {
textValue: ''
},
onInput: function (event) {
this.setData({
textValue: event.detail.value
})
},
navigateTo: function () {
wx.navigateTo({
url: '/pages/second/second?textValue=' + this.data.textValue
})
},
onLoad: function (options) {
if (options.textValue) {
this.setData({
textValue: options.textValue
})
} else if (!this.data.textValue) {
this.setData({
textValue: '默认字体'
})
}
}
})
```
第二个页面 wxml 文件:
```
<view class="container">
<text>{{textValue}}</text>
</view>
```
第二个页面 js 文件:
```
Page({
data: {
textValue: ''
},
onLoad: function (options) {
if (options.textValue) {
this.setData({
textValue: options.textValue
})
} else {
this.setData({
textValue: '多行文本框为空'
})
}
}
})
```
在主页面中,我们先绑定了一个多行文本框和一个按钮。当用户在多行文本框中输入时,我们通过 `bindinput` 事件来监听输入内容,并将输入的内容保存在 `textValue` 变量中。当用户点击页面跳转按钮时,我们使用 `wx.navigateTo` 来跳转到第二个页面,并将 `textValue` 的值传递过去。
在第二个页面中,我们通过 `onLoad` 事件来获取传递过来的值,并根据传递过来的值来设置 `textValue` 的值。如果页面跳转时没有传递 `textValue` 的值,则将 `textValue` 的值设置为“多行文本框为空”。
当用户在主页面中没有输入任何内容并且页面跳转也没有传递 `textValue` 的值时,我们将 `textValue` 的值设置为“默认字体”。
以上就是实现多行文本框显示不同内容的微信小程序的代码。
阅读全文