微信小程序搜索功能(IT技术) |
您所在的位置：网站首页 › 小程序的搜索功能 › 微信小程序搜索功能(IT技术) |
微信小程序搜索功能(IT技术)
|
微信小程序云开发实现搜索功能，供大家参考，具体内容如下 微信小程序使用云开发实现搜索功能有两种情况，一种是简单的搜索用关键字来查询数据，另一种是模糊查询关于关键字的全部数据查询。废话不用多说直接上代码部分。 简单搜索功能实现WXML代码段 搜索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' }) } }) }, })
|
【本文地址】
今日新闻 |
推荐新闻 |