2022 年 10月 13 日随笔档案 - 流浪のwolf

vant2 List 组件下拉加载 onLoad

摘要： ps：loading finished onLoad 两个变量一个函数； async onLoad() { console.log("onload"); // 异步更新数据 // setTimeout 仅做示例，真实场景中一般为 ajax 请求 // 加载状态结束 this.page += 1; 阅读全文

posted @ 2022-10-13 19:30 流浪のwolf 阅读(31) 评论(0) 推荐(0) 编辑

回车搜索和点击建议搜索复用一个函数

摘要：标签里面的事件（子组件传参emit）优先级大于methods的事件方法； ps：取消奥按钮：@cancel="$router.go(-1)" 子组件传参： @click="$emit('search', item)" 回车请求数据： @search="onSearch(keywords)" ；阅读全文

posted @ 2022-10-13 17:24 流浪のwolf 阅读(18) 评论(0) 推荐(0) 编辑

watch 监视搜索关键词的变化不断发送请求返回建议

摘要： watch: { keywords: { // yarn add lodash 下载lodash包 // import { debounce } from "lodash"; 引入防抖的函数 // 每隔700ms执行一次handler函数（在keywords变化的情况下，频繁触发的事件） handl 阅读全文

posted @ 2022-10-13 16:54 流浪のwolf 阅读(15) 评论(0) 推荐(0) 编辑

搜索显示建议内容时显示具体搜索内容高亮

摘要： <span v-html="hightLight(item)"></span> 思路：匹配出搜索的关键词然后替换为高亮的标签； hightLight(str) { // 搜索高亮 const reg = new RegExp(this.keywords, "gi"); console.log(re 阅读全文

posted @ 2022-10-13 15:57 流浪のwolf 阅读(10) 评论(0) 推荐(0) 编辑

搜索历史、建议、结果的显示逻辑

摘要： <template> <div id="searchVue"> <form action="/"> <van-search v-model="keywords" show-action background="#4694fa" placeholder="请输入搜索关键词" @search="onSe 阅读全文

posted @ 2022-10-13 11:52 流浪のwolf 阅读(21) 评论(0) 推荐(0) 编辑

黑马头条第四天 - 我的频道业务

该文被密码保护。阅读全文

posted @ 2022-10-13 11:37 流浪のwolf 阅读(68) 评论(0) 推荐(0) 编辑

移动端项目思想