请给我一个复杂一点的搜索框,实列代码包括js,wxss,wxml
时间: 2024-02-19 08:58:23 浏览: 61
复杂的搜索页面(asp.net源代码)
4星 · 用户满意度95%
好的,以下是一个稍微复杂一点的微信小程序云开发搜索框实例代码:
wxml代码:
```
<view class="search">
<input class="search-input" placeholder="请输入搜索内容" bindinput="inputChange" />
<button class="search-btn" bindtap="search">搜索</button>
</view>
<view class="list">
<block wx:for="{{list}}" wx:key="id">
<view class="item">
<view class="title">{{item.title}}</view>
<view class="content">{{item.content}}</view>
</view>
</block>
<view wx:if="{{list.length == 0}}" class="empty">暂无数据</view>
</view>
```
wxss代码:
```
.search {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px;
background-color: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.search-input {
flex: 1;
height: 30px;
border: none;
outline: none;
background-color: #f5f5f5;
padding: 0 10px;
border-radius: 15px;
}
.search-btn {
width: 60px;
height: 30px;
border: none;
outline: none;
background-color: #39f;
color: #fff;
border-radius: 15px;
}
.list {
margin-top: 10px;
}
.item {
padding: 10px;
background-color: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
margin-bottom: 10px;
}
.title {
font-size: 16px;
font-weight: bold;
margin-bottom: 5px;
}
.content {
font-size: 14px;
color: #666;
}
.empty {
text-align: center;
color: #666;
margin-top: 30px;
}
```
js代码:
```
const db = wx.cloud.database()
const _ = db.command
Page({
data: {
list: [],
keyword: ''
},
inputChange(e) {
this.setData({
keyword: e.detail.value
})
},
search() {
if (!this.data.keyword) {
wx.showToast({
title: '请输入搜索内容',
icon: 'none'
})
return
}
wx.showLoading({
title: '加载中',
})
db.collection('articles').where(_.or([{
title: db.RegExp({
regexp: this.data.keyword,
options: 'i'
})
},
{
content: db.RegExp({
regexp: this.data.keyword,
options: 'i'
})
}
])).get().then(res => {
wx.hideLoading()
this.setData({
list: res.data
})
}).catch(err => {
wx.hideLoading()
wx.showToast({
title: '加载失败,请重试',
icon: 'none'
})
console.error(err)
})
}
})
```
这个实例代码是一个稍微复杂一点的搜索框,支持多关键词搜索,同时添加了输入为空的判断和加载提示。你可以根据你的需求进行修改。
阅读全文