[vue]移动端实现搜索定位功能

搜索框

 <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('未找到该信息');
      }
    }