本篇内容介绍了“微信小程序云开发怎么实现搜索功能”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
简单搜索功能实现
WXML代码段
<view class="sousuokuang"> <view class="sousuo"> <view class="shurukuang"> <input type="text" placeholder="搜索" value="" bindinput="GetSearchInput"></input> </view> <view class="sousuo_anniu" bindtap="ToSearch"> <text>搜索</text> <icon type="search" size="20"></icon> </view> </view> </view>
WXSS代码段
.sousuokuang {
width: 100%;
height: 100rpx;
display: flex;
flex-direction: column;
align-items: center;
background-color: white;
}
.sousuo {
width: 92%;
height: 100rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-items: center;
}
.shurukuang {
width: 80%;
height: 64rpx;
border-radius: 32rpx;
display: flex;
align-items: center;
justify-content: center;
background-color: #f6f6f6;
}
.shurukuang input {
width: 90%;
height: 100%;
font-size: 32rpx;
}
.sousuo_anniu {
width: 20%;
height: 64rpx;
display: flex;
align-items: center;
justify-content: center;
}
.sousuo_anniu text {
font-size: 30rpx;
}
JavaScript代码段
const db = wx.cloud.database()
Page({
data: {
search: ''
},
onLoad: function (options) {
},
GetSearchInput: function(e) {
this.setData({
search: e.detail.value
})
},
ToSearch: function(e) {
if(this.data.search == '') {
wx.showToast({
title: '请输入',
icon: 'none'
})
return
}
db.collection('输入你查询的表名').where({
name: this.data.search
}).get().then(res => {
if(res.data.length != 0) {
this.setData({
shangpinbiao: res.data
})
}else {
wx.showToast({
title: '未找到商品',
icon: 'none'
})
}
})
},
})
模糊搜索功能实现
WXML代码段和WXSS代码段跟简单搜索的一样，JavaScript代码段如下
Javascript代码段
const db = wx.cloud.database()
Page({
data: {
search: ''
},
onLoad: function (options) {
},
GetSearchInput: function (e) {
this.setData({
search: e.detail.value
})
},
ToSearch: function (e) {
if (this.data.search == '') {
wx.showToast({
title: '请输入',
icon: 'none'
})
return
}
db.collection('输入你查询的表名').where({
name: db.RegExp({
regexp: this.data.search,
options: 'i',
}),
}).get().then(res => {
if (res.data.length != 0) {
this.setData({
shangpinbiao: res.data
})
} else {
wx.showToast({
title: '未找到',
icon: 'none'
})
}
})
},
})
“微信小程序云开发怎么实现搜索功能”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注云搜网网站，小编将为大家输出更多高质量的实用文章！
