uniapp做微信小程序搜索查询数据

Vue uniapp语法
在后端还没写好查询接口的时候为了实现前端的搜索效果可以前端实现数组的遍历查询
或者面试的时候要求前端写一个demo =====>针对前端小白的教程干净利索
原图：

根据名称查询数据：

根据设备号查询：

HTML部分先把数据进行渲染布局最终效果为图一

<view class="print-box"><!-- 顶部搜索框 --><view class="print-input flex" style=""><view class="" style="flex: 1;">//@search 是点击enter键 或者手机的右下角的键盘确认键触发  //使用的uview组件<u-search placeholder="请输入设备位置/设备型号"  @search='search'    v-model="inputText"></u-search> </view></view><!-- 显示打印机区域 --><block v-for="(item,index) in printList" :key="index"> <view class="showPrint flex just-between" @click="selectNavPrint(item.title)"><view class="print-img"><image :src="item.url"></image></view><view class="flex-column"><!-- 编号 --><view class="printNumber">{{item.title}}</view><!-- 地址 --><view class="flex printAddress"><!-- 定位图标 --><view class="iconAddress"><image :src="item.icon"></image></view><!-- 地址信息 --><view class="address">{{item.futitle}}</view></view></view><view class="icon-next flex align-center"><image :src="item.arrow"></image></view></view></block></view>

js部分

export default{data(){printList: [{id: 1,url: '../../static/chart@2x.png',title: 'SDF10409160223',icon: '../../static/address@2x.png',futitle: '龙子湖区丰庆路魏河北路瀚宇天悦',arrow: '../../static/into@2x.png'},{id: 2,url: '../../static/chart@2x.png',title: 'ZYX10409160223',icon: '../../static/address@2x.png',futitle: '金水区丰庆路魏河北路瀚宇天悦',arrow: '../../static/into@2x.png'},{id: 3,url: '../../static/chart@2x.png',title: 'ERT10409160223',icon: '../../static/address@2x.png',futitle: '文化区丰庆路魏河北路瀚宇天悦',arrow: '../../static/into@2x.png'},{id: 4,url: '../../static/chart@2x.png',title: 'SDF10409160223',icon: '../../static/address@2x.png',futitle: '龙子湖区丰庆路魏河北路瀚宇天悦',arrow: '../../static/into@2x.png'},],}}

js逻辑

methods:{search() {let list = [];this.printList.forEach((item, index) => {let str = this.inputText;//搜索框输入的查询内容let patt1 = new RegExp(str);  //把内容new regExp下let result = patt1.test(item.futitle); //搜索框(标题搜索)new regExp的内容是否包含在 数组的每一项里面let result2 = patt1.test(item.title);  //搜索框(编号搜索)new regExp的内容是否包含在 数组的每一项里面if (result || result2) {this.printList = [];list.push(item);this.printList = list;}})},}

uniapp做微信小程序搜索查询数据相关推荐

小程序 php转excel,做微信小程序上传数据数据格式？-微信上传数据生成excle
做微信小程序上传数据数据格式? 建议找人专门制作设计好,专业的事情交给专业的人做,自己浪费时间还不一定能搞好如何把微信里的excel传到qq上 1.在手机中先箭头所示的"微信" ...
UNIAPP---实现微信小程序登录授权和手机号授权（uniapp做微信小程序）
UNIAPP-实现微信小程序登录授权和手机号授权(uniapp做微信小程序) 描述:uniapp开发小程序,先授权用户信息后再出现手机号授权的页面进行手机号授权.完成后返回上一页面并把信息存入后台以及 ...
使用uniapp做微信小程序，在小程序编辑器运行时编译报错：appid不合法，导致启用不了。
使用uniapp做微信小程序,在小程序编辑器运行时编译报错:appid不合法,导致启用不了.这个好坑爹啊,我这么淑女的小可爱都想骂人了,我好累,写个博客发泄发泄吧! 复现我的问题:神操作--代码跟别人 ...
HBuilderX用uni-app做微信小程序授权登录
首先,先找到HBuilderX的官网下载软件安装包进行安装. 链接:https://uniapp.dcloud.io/quickstart 然后根据你电脑的配置下载相对应的版本即可. 下载完成后,就是 ...
解决uniapp在微信小程序显示图片/数据，h5不显示图片/数据。
配置跨域首先在mainifest.json中的源码视图中配置跨域. "h5": {"devServer": {"port": 8080,& ...
vue uniapp 微信小程序搜索下拉框模糊搜索
vue uniapp 微信小程序搜索下拉框模糊搜索话不多说直接贴代码 template <template><view class="index"> ...
uniapp开发微信小程序 wx.navigateBack()携带数据问题
uniapp开发微信小程序 wx.navigateBack()携带数据问题某个表单页面有时需要跳转另一个页面查询数据但如此想要保存当前页面数据需要在另一个查询页面调用 wx.navigateBa ...
uniapp实现微信小程序云开发数据库访问，并解决云开发数据库获取不到数据问题
uniapp实现微信小程序云开发数据库访问,并解决云开发数据库获取不到数据问题使用工具是HBuilder X 1.配置好AppID(小程序ID) 在HBuilder X工具的manifest.js文 ...
小程序微信统计表格_微信小程序简单的数据表格及查询功能
简介: 此项目是一个前后端分离的小demo, 开发工具:idea+微信小程序开发工具前端:界面布局样式和js的跳转后端:依靠SpringBoot的业务逻辑层项目的码云地址: 微信开发工具的使用和 ...

uniapp做微信小程序搜索查询数据

uniapp做微信小程序搜索查询数据相关推荐

最新文章

热门文章