搜索框
<div class="sticky">
<van-cell-group class="search">
<van-field v-model="input" placeholder="请输入搜索关键字">
<template #right-icon>
<van-icon name="search" @click="search"/>
</template>
</van-field>
</van-cell-group>
</div>
循环的列表
<DeviceCell
v-for="(item, index) in list"
:key="index"
ref="positioning"
:diyi="item.diyi"
:dier="item.dier"
:disan="item.disan"
:disi="item.disi"
:diwu="item.diwu"
:diliu="item.diliu"
/>
注意 此处一定不要忘记加 ref
export default {
name: 'App',
components: {},
data() {
return {
list:[]
input: '',
i: 0,
}
},
}
然后就是方法的实现了
search(list) {
const filterList = (list && list.length) ? list.filter(item => {
return item.diyi.indexOf(this.input) !== -1 || item.dier.indexOf(this.input) !== -1 || item.disan.indexOf(this.input) !== -1 || (item.disi!== null ? item.disi.indexOf(this.input) !== -1 : false) || (item.diwu!== null ? item.diwu.indexOf(this.input) !== -1 : false) || (item.diliu!== null ? item.diliu.indexOf(this.input) !== -1 : false)
}) : []
console.log(filterList )
if (filterList.length !== 0) {
list.forEach(item => {
if (filterList[this.i].id === item.id) {
// i进行加减操作就可查看上一个或者下一个
let j = list.findIndex(i => i === item)
this.$refs.positioning[j].$el.scrollIntoView({
behavior:'smooth',// 平滑过渡
block: 'center' // 滑动到视图的中间
})
}
})
} else {
Toast.fail('未找到该信息');
}
}