在含有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()
},
})