微信小程序頁面搜索框查詢（無后臺接口情況下）

效果圖：

wxml

<view class="container"><view class="goodslist"><view class="search"><view class="search-header"><image src="/news/img/search.png"></image><input class="search-input" bindinput='query' placeholder="搜索"/></view></view><scroll-view scroll-y="true"><view wx:for="{{list}}" wx:key="index" class="goodslist-li" bindtap="onGoodsDetail"><view class="goodslist-li-pic"><image src="{{item.pic}}"></image></view><view class="goodslist-li-content"><view class="goodslist-li-name">{{item.coding}}<text decode="true">&nbsp;</text>{{item.name}}</view><view class="goodslist-li-format">{{item.format}}</view><view class="goodslist-li-factory">{{item.factory}}</view></view></view></scroll-view></view> </view>

js

//index.js //獲取應用實例 const app = getApp()Page({data: {//這是頁面需要的jsonlist: [{'id':'1','pic':'/pages/news/img/banner3.png','coding':'15436','name':'小兒熱速清顆粒','format':'2g*6袋','factory':'哈爾濱圣泰生物制藥有限公司'},{'id':'2','pic':'/pages/news/img/banner3.png','coding':'15436','name':'夏桑菊','format':'10g*15袋','factory':'廣州白云山制藥有限公司'},], //這是查詢需要的jsonlist2: [{'id':'1','pic':'/pages/news/img/banner3.png','coding':'15436','name':'小兒熱速清顆粒','format':'2g*6袋','factory':'哈爾濱圣泰生物制藥有限公司'},{'id':'2','pic':'/pages/news/img/banner3.png','coding':'15436','name':'夏桑菊','format':'10g*15袋','factory':'廣州白云山制藥有限公司'},] },// 搜索query(e){console.log('111')var list = this.data.list2; //先把第二條json存起來var list2 = []; //定義一個數組//循環去取數據for(var i=0;i<list.length;i++){var string = list[i].name;//查詢json里的name是否包含搜索的關鍵詞，如果有就把他裝進list2數組if(string.indexOf(e.detail.value) >= 0){list2.push(list[i]);}}//到這里list2就已經是你查出的數據//如果輸入的關鍵詞為空就加載list數據，不是空就加載list2數據if(e.detail.value == ""){//加載全部this.setData({list: list})} else {this.setData({list: list2})}},// 點擊商品詳情onGoodsDetail:function(){wx.navigateTo({url: '/pages/goods_detail/index'})} })

wxss

/**index.wxss**/ .container{display: flex;flex-direction: column;align-items: center; } /*搜索樣式 */ .search{position: fixed;top: 0;left: 0;width: 100%;height: 100rpx;background-color: #ffffff;border-bottom: 2rpx solid #eeeeee;z-index: 99; } .search-header{width: 95%;height: 70rpx;background-color: #eeeeee;display: flex;justify-self: start;align-items: center;border-radius: 10rpx;margin: 0 auto;margin-top: 15rpx; } .search-header image{width: 50rpx;height: 50rpx;padding: 0 20rpx; } .search-input{width: 80%;height: 70rpx;font-size: 24rpx; } /* 商品列表 */ .goodslist{width: 100%;display: flex;align-items: center;flex-direction: column;background-color: #fff;margin-top: 100rpx; } .goodslist-li{width: 100%;display: flex;justify-content: flex-start;align-items: center;padding: 20rpx 0;padding-left: 20rpx;border-bottom: 2rpx solid #eeeeee; } .goodslist-li-pic{width: 200rpx;height: 200rpx; } .goodslist-li-pic image{width: 100%;height: 100%; } .goodslist-li-content{margin-left:20rpx;font-size: 26rpx;line-height: 50rpx; }

總結

以上是生活随笔為你收集整理的微信小程序页面搜索框查询（无后台接口情况下）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。