微信小程序页面搜索框查询（无后台接口情况下）

微信小程序页面搜索框查询（无后台接口情况下）

效果图：

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: {
    //这是页面需要的json
    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':'广州白云山制药有限公司'
      },
    ],	
    //这是查询需要的json
	  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;		//先把第二条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;
}