微信小程序页面搜索框查询(无后台接口情况下)
效果图:
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/f074596659d4472aefb98423005b26c5.png)
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"> </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
const app = getApp()
Page({
data: {
list: [
{
'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':'广州白云山制药有限公司'
},
],
list2: [
{
'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;
var list2 = [];
for(var i=0;i<list.length;i++){
var string = list[i].name;
if(string.indexOf(e.detail.value) >= 0){
list2.push(list[i]);
}
}
if(e.detail.value == ""){
this.setData({
list: list
})
} else {
this.setData({
list: list2
})
}
},
onGoodsDetail:function(){
wx.navigateTo({
url: '/pages/goods_detail/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;
}