微信小程序写一个查询窗口代码
时间: 2023-03-31 14:00:22 浏览: 58
你好,以下是查询窗口的代码示例:
wxml 文件:
```
<view class="container">
<input class="input" placeholder="请输入查询内容" bindinput="onInput" />
<button class="btn" bindtap="onSearch">查询</button>
<view wx:if="{{result}}">
<text class="result">{{result}}</text>
</view>
</view>
```
js 文件:
```
Page({
data: {
query: '',
result: ''
},
onInput: function(e) {
this.setData({
query: e.detail.value
})
},
onSearch: function() {
// 在这里编写查询逻辑,将查询结果赋值给 result
this.setData({
result: '查询结果:xxx'
})
}
})
```
css 文件:
```
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
.input {
width: 80%;
height: 40px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 20px;
padding: 20px;
}
.btn {
width: 80%;
height: 40px;
background-color: #007aff;
color: #fff;
border-radius: 20px;
font-size: 16px;
text-align: center;
line-height: 40px;
}
.result {
margin-top: 20px;
font-size: 18px;
color: #333;
}
```
希望能对你有所帮助。