本篇内容介绍了“微信小程序云开发怎么实现搜索功能”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
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'
})
}
})
},
})
“微信小程序云开发怎么实现搜索功能”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。