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

@Author：Runsen

寫在前面：我是「Runsen」，熱愛技術、熱愛開源、熱愛編程。技術是開源的、知識是共享的。大四棄算法轉前端，需要每天的日積月累， 每天都要加油！！！

今天將完成Vue項目城市選擇頁搜索邏輯實現。

文章目錄

• Search.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项目城市选择页搜索逻辑实现，边输入边搜索功能的解决办法：节流函数的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。