父组件
<Tabs list="{
{list}}" binditemChange="handleItemChange"></Tabs>
Page({
data: {
list: [
{
id: 0,
name: 'JavaScript',
isDone: false,
isActive: true
},
{
id: 1,
name: 'Vue',
isDone: false,
isActive: true
},
{
id: 2,
name: 'Nodejs',
isDone: false,
isActive: true
},
{
id: 3,
name: 'Git',
isDone: false,
isActive: true
},
{
id: 4,
name: 'jQuery',
isDone: false,
isActive: true
},
{
id: 5,
name: 'Java',
isDone: false,
isActive: true
},
{
id: 6,
name: 'C++',
isDone: false,
isActive: true
},
{
id: 7,
name: 'eCharts',
isDone: false,
isActive: true
}
]
},
handleItemChange(e) {
const {
list } = this.data;
let {
value } = e.detail;
list.forEach((item) => {
const itemName = item.name.toLowerCase()
if (itemName.includes(value)) {
item.isActive = true
} else {
item.isActive = false
}
})
this.setData({
list
})
}
})
子组件
<view class="container">
<view class="searchBox">
<input type="text" class="searchInput" bindinput="handleInput" />
<image src="../../icon/search.png" class="searchImg" mode="aspectFit" />
</view>
<view class="todoListBox">
<view wx:for="{
{list}}" wx:key="id" class="todolist" hidden="{
{!item.isActive}}">
<checkbox class="cb">{
{item.name}}</checkbox>
</view>
</view>
</view>
.container {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
height: 100%;
}
.searchBox {
display: flex;
}
.searchInput {
padding: 5px;
border: 1px solid black;
border-radius: 10px;
margin-right: 10px;
}
.searchImg {
width: 30px;
height: 30px;
}
.todoListBox {
width: 400px;
height: 300px;
margin-top: 10px;
display: flex;
flex-direction: column;
align-items: center;
}
.todolist {
width: 250px;
}
.cb {
margin-bottom: 5px;
}
.notactive {
display: none;
}
Component({
properties: {
list: {
type: Array,
value: []
}
},
data: {
},
methods: {
handleInput(e) {
let {
value } = e.detail
value = value.toLowerCase()
this.triggerEvent("itemChange",{
value})
}
}
})