七十一、vue项目城市选择页搜索逻辑实现，边输入边搜索功能的解决办法：节流函数 -尊龙游戏旗舰厅官网

2020/10/30、 周五、今天又是奋斗的一天。

@author：runsen

写在前面：我是「runsen」，热爱技术、热爱开源、热爱编程。技术是开源的、知识是共享的。大四弃算法转前端，需要每天的日积月累， 每天都要加油！！！

今天将完成vue项目城市选择页搜索逻辑实现。

文章目录

• search.vue
• 节流函数

在之前的项目代码中，城市搜索只是一个布局。

<template><div><div class="search"><input v-model="keyword" class="search-input" type="text" placeholder="输入城市名或拼音" /></div><divclass="search-content"ref="search"v-show="keyword"><ul><liclass="search-item border-bottom"v-for="item of list":key="item.id">{{item.name}}</li><li class="search-item border-bottom" v-show="hasnodata">没有找到匹配数据</li></ul></div></div> </template><script> import bscroll from 'better-scroll' export default {name: 'citysearch',props: {cities: object},data () {return {keyword: '',list: [],timer: null}},computed: {hasnodata () {return !this.list.length}},// 当keyword发生改变watch: {keyword () {if (this.timer) {cleartimeout(this.timer)}if (!this.keyword) {this.list = []return}// 设置监听器 100毫秒执行this.timer = settimeout(() => {// 在函数声明变量const result = []for (let i in this.cities) {this.cities[i].foreach((value) => {// 遍历cities 如果value中的spell存在搜索的英文的index，或者value中的name存在搜索的中文的index// result列表插入数据if (value.spell.indexof(this.keyword) > -1 || value.name.indexof(this.keyword) > -1) {result.push(value)}})}this.list = result}, 100)}},mounted () {this.scroll = new bscroll(this.$refs.search)} } </script><style lang="stylus" scoped>@import '~styles/varibles.styl'.searchheight: .72rempadding: 0 .1rembackground: $bgcolor.search-inputbox-sizing: border-boxwidth: 100%height: .62rempadding: 0 .1remline-height: .62remtext-align: centerborder-radius: .06remcolor: #666.search-contentz-index: 1overflow: hiddenposition: absolutetop: 1.58remleft: 0right: 0bottom: 0background: #eee.search-itemline-height: .62rempadding-left: .2rembackground: #fffcolor: #666 </style>

防抖函数的使用场景： 频繁触发、输入框搜索

一般的是当用户输入完，点击确定的按钮在向后发送请求，还有一种就是的我一边输入，一边向后台发送请求，但是会产生一个性能的问题，就是一直发请求造成页面的卡顿，这里就是使用节流函数,当用户每次点击键盘之间超过300ms就发送请求，否则不请求

search.vue

<template><div id="search"><input type="text" class="search" placeholder="搜索" v-model.trim="title" /></div> </template><script>// 节流函数 const delay = (function() {let timer = 0; return function(callback, ms) {cleartimeout(timer);timer = settimeout(callback, ms);}; })(); export default {name: 'search',data() { return {title: '',search:[]};},watch: { //watch title changetitle() {delay(() => { this.fetchdata();}, 300);},},methods: {async fetchdata(val) { const res = await this.fetch({url: '写上你的url',method: 'get',params: { title: this.title },}); this.search = res.data.list;},}, };</script>

参考课程：慕课网vue2.5->2.6->3.0 开发去哪儿网app 从零基础入门到实战项目开发

总结

以上是尊龙游戏旗舰厅官网为你收集整理的七十一、vue项目城市选择页搜索逻辑实现，边输入边搜索功能的解决办法：节流函数的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得尊龙游戏旗舰厅官网网站内容还不错，欢迎将尊龙游戏旗舰厅官网推荐给好友。