小程序过滤关键字搜索

上个页面过滤筛选

在含有Tab栏分别进行对应切换搜索

需求:在有2个tab栏的样式当中，分别点击不同的tab栏的内容对应显示各自的内容，但搜索框也随着你切换的状态而改变。
分别过滤搜索显示各种对应内容的样式。

bindchange是失去焦点时才触发操作 获取输入框的值
bindinput是监听获取输入框里面的值

效果图

代码

wxml

<view class="swiper-tab">
  <!-- 输入框数据 -->
  <!-- 然后需要定义的在所属的input当中写逻辑 -->
  <input type="text" wx:if="{{currentTab==0 ? 'showinput' : ''}}" placeholder="这个是产品输入框" />
  <input type="text" wx:elif="{{currentTab==1 ? 'showinput' : ''}}" placeholder="这个是金融输入框" />
  <input type="text" wx:else placeholder="这个是理财输入框" />
  <!--  输入框数据 /-->
  <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">产品</view>
  <view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">金融</view>
  <view class="swiper-tab-list {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="swichNav">理财</view>
</view>

<swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight - 31}}px"
  bindchange="bindChange">
  <swiper-item>
    <view>产品</view>
  </swiper-item>
  <swiper-item>
    <view>金融</view>
  </swiper-item>
  <swiper-item>
    <view>理财</view>
  </swiper-item>
</swiper>

wxss

.swiper-tab{
  width: 100%;
  text-align: center;
  line-height: 80rpx;}
.swiper-tab-list{  font-size: 30rpx;
  display: inline-block;
  width: 33.33%;
  color: #777777;
}
.on{ color: blue;
  border-bottom: 3rpx solid blue;}

.swiper-box{ display: block; height: 100%; width: 100%; overflow: hidden; }
.swiper-box view{
  text-align: center;
}
input{
  width: 80%;
  margin: 0 auto;
  border: 1px solid blue;
}

js

Page({
  data: {
      winWidth: 0,
      winHeight: 0,
      currentTab: 0,
      showinput:true,//这个是输入框是否显示
  },
  onLoad: function() {

      var that = this;

      /**
       * 获取当前设备的宽高
       */
      wx.getSystemInfo( {

          success: function( res ) {
              that.setData( {
                  winWidth: res.windowWidth,
                  winHeight: res.windowHeight
              });
          }

      });
  },
    
//  tab切换逻辑
  swichNav: function( e ) {

      var that = this;

      if( this.data.currentTab === e.target.dataset.current ) {
          return false;
      } else {
          that.setData( {
              currentTab: e.target.dataset.current
          })
      }
  },

  bindChange: function( e ) {

      var that = this;
      that.setData( { currentTab: e.detail.current });

  },
})

过滤关键字搜索

这个是很常见的功能，但是说简单也不简单，说难也不难。

那这里直接上效果图与代码

这边以调取cnode的api为列

效果图

代码

wxml

<view>
<view>
<input type="text" bindinput="search" value='{{searchValue}}' placeholder="请输入内容"/>
</view>
<text>\n</text>
<view wx:for="{{ updatalist1}}" wx:key="id">
    {{item.title}}
</view>
</view>

js

Page({
        data: {
                list: [],//定义一个空数组接收请求的数据
                searchValue: ''//这个搜索的值定义为空
        },
        gethttp() {
                var that = this;
                wx.request({
                        url: 'https://cnodejs.org/api/v1/topics',
                        method: 'get',
                        header: {
                                'content-type': 'application/json'
                        },
                        success: (res) => {
                                var list = res.data.data//定义一个值拿到这个请求
                                that.setData({
                                        list:list,
                                        searchValue: '',// 这个是下面的搜索对应的值 在else的逻辑里面   
                                        updatalist1: list//这个是下面的搜索对应的值 在else的逻辑里面   
                                })
                        },
                        fail: (res) => {}
                })
        },
        search(e) {
                var that = this
                var value = e.detail.value//获取搜索的内容
                var data = []//定义一个空数组用来接收你输入的值放在这里面
                if (value) {
                        console.log(that.data.list)
                        // that.data.list 这边的list是你请求的值 让你刚刚定义的等于这个
                        // filter过滤 
                        // item.title是你要过滤的名称 这里是title 具体你要过滤哪个  看你需求
                        data = that.data.list.filter(item => {
                                console.log(item.title)
                                return item.title.indexOf(value) > -1
                        })
                } else {
                        data = that.data.list
                        // 否则的话当没有输出值 让其全部显示
                }
                this.setData({
                        updatalist1: data//定义一个值等于你过滤后的值  然后在上面你请求的接口里面再写一下
                })
        },
        onLoad: function (options) {
                let that = this;
                that.gethttp()
        },
})