首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

vue搜索页开发实例代码详解（热门搜索，历史搜索，淘宝接口演示）

Posted in Javascript onApril 11, 2020

完整效果演示

vue搜索页开发实例代码详解（热门搜索，历史搜索，淘宝接口演示）

首先完成这个伪搜索框

vue搜索页开发实例代码详解（热门搜索，历史搜索，淘宝接口演示）

src/components/search/index.vue （通用搜索框组件）

<template>
 <div class="mine-search-box-wrapper">
  <i class="iconfont icon-search"></i>
  <div class="mine-search-box" v-if="fake">{{placeholder}}</div>
  <input
   class="mine-search-box"
   type="text"
   title="搜索框"
   :placeholder="placeholder"
   ref="input"
   v-model="query"
   v-if="!fake"
  >
  <i
   class="iconfont icon-close"
   v-show="query"
   @click="reset"
  ></i>
 </div>
</template>

<script>
import {debounde} from 'assets/js/util';


export default {
  name:'Search',
  props:{//接收的参数
    placeholder:{
      type:String,
      default:'请输入搜索内容'
    },
    fake:{
      type:Boolean,
      default:false
    }
  },
  data(){
    return{
      query:'',
    }
  },
  watch:{
    query:debounde(function(){
      this.$emit('query',this.query);
    })
  },
  methods:{
    focus(){
      this.$refs.input && this.$refs.input.focus();
    },
    clear(){
      this.query='';
    },
    reset(){//重置
      this.clear();
      this.focus();
    }
  }
}
</script>

<style lang="scss" scoped>
  $search-box-height: 30px;
  $icon-color: #ccc;
  $icon-font-size-sm: 18px;

 .mine-search-box-wrapper {
  display: flex;
  align-items: center;
  width: 85%;
  height: $search-box-height;
  padding: 0 7px;
  background-color: #fff;
  border-radius: $search-box-height / 2;
  margin-left:15px;
 }

 .iconfont {
  color: $icon-color;
  font-size: $icon-font-size-sm;
  font-weight: bold;
 }

 .mine-search-box {
  flex: 1;
  background: none;
  border: none;
  margin: 0 6px;
  color: #666;
  line-height: 1.5;
 }
</style>

src/assets/js/util.js  节流函数（防止请求数据时频率过快消耗性能）

//函数节流
export const debounde=(func,delay=200)=>{
  let timer=null;

  return function(...args){
    timer && clearTimeout(timer);

    timer=setTimeout(()=>{
      func.apply(this,args);
    },delay);
  }
}

在分类页的头部组件中引入搜索框组件

src/pages/category/header.vue

<template>
  <div class="header">
    <i class="iconfont icon-scan header-left"></i>
    <div class="header-center">
      <search placeholder="开学季有礼，好货五折起" @query='getQuery' fake @click.native="goToSearch" />
    </div>
    <i class="iconfont icon-msg header-right"></i>
  </div>
</template>

<script>
import Search from 'components/search';

export default {
  name:'CategoryHeader',
  components:{
    Search
  },
  methods:{
    getQuery(query){
      console.log(query);
    },
    goToSearch(){
      this.$router.push('/search');
    }
  }
}
</script>

<style lang="scss" scoped>
  .header{
    background-color:rgba(222, 24, 27, 0.9);
    transition:background-color 0.5s;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding:5px 20px;

    .iconfont{
      font-size:24px;
      color:#fff;
    }

    .header-center{
      flex:1;
    }
  } 
</style>

点击搜索框之后会跳转到真正的搜索页

vue搜索页开发实例代码详解（热门搜索，历史搜索，淘宝接口演示）

热门搜索组件

vue搜索页开发实例代码详解（热门搜索，历史搜索，淘宝接口演示）

src/pages/search/hot.vue

<template>
 <div class="hot">
  <h4 class="hot-title">热门搜索</h4>
  <div class="loading-container" v-if="!hots.length">
   <me-loading/>
  </div>
  <ul class="hot-list" v-else>
   <li class="hot-item" v-for="(item,index) in hots" :key="index" @click="$_selectItem(item.hotWord)">
     {{item.hotWord}}
   </li>
  </ul>
 </div>
</template>

<script>
import Search from 'components/search';
import MeLoading from 'components/loading';
import {getHot} from 'api/search';
import {searchMixin} from 'api/mixins';

export default {
  name:'SearchHot',
  components:{
    MeLoading
  },
  data(){
    return{
      hots:[]
    }
  },
  mixins:[searchMixin],
  created(){
    this.getHot().then(()=>{
      this.$emit('loaded');
    })
  },
  methods:{
    getHot(){
      return getHot().then(data=>{
        return new Promise(resolve=>{
          if(data){
            this.hots=data;
            resolve();
          }
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
$border-color: #e5e5e5;
$font-size-base: 12px;
$font-size-l: $font-size-base + 2;

 .hot {
  padding-left: 10px;
  background-color: #fff;
  border-bottom: 1px solid $border-color;
  margin-bottom: 10px;

  &-title {
   height: 34px;
   line-height: 34px;
   font-size: $font-size-l;
   font-weight: bold;
  }

  &-list {
   display: flex;
   flex-wrap: wrap;
  }

  &-item {
   padding: 8px;
   background-color: #f0f2f5;
   border-radius: 4px;
   margin: 0 10px 10px 0;
   color: #686868;
  }
 }

 .loading-container {
  padding: 10px 0;
 }
</style>

axios获取热门搜索数据

src/api/search.js

import axios from 'axios';

//获取热门搜索数据 ajax
export const getHot=()=>{
  return axios.get('http://www.imooc.com/api/search/hot').then(res=>{
    
    res=res.data.hotKeyWord;
    if(res && res.owner){
      return res.owner;
    }
    throw new Error('没有成功获取到数据');

  }).catch(err=>{
    console.log(err);
  });
}

点击搜索的关键词，跳转到淘宝搜索程序

src/api/mixins.js

import storage from 'assets/js/storage';
import {SEARCH_HISTORY_KEYWORD_KEY} from 'pages/search/config';

export const searchMixin={
  methods:{
    $_selectItem(keyword){
      let keywords=storage.get(SEARCH_HISTORY_KEYWORD_KEY,[]);//找到所有搜索历史
 
       if(keywords.length!=0){
         keywords=keywords.filter(val=>val!=keyword);//这次的关键词如果在搜索历史里已存在，先剔除掉
       }
 
       keywords.unshift(keyword);//把这次的关键词放在搜索历史的最开头
      
      storage.set(SEARCH_HISTORY_KEYWORD_KEY,keywords);//更新搜索历史
 
      //跳转到淘宝搜索页
      location.href = `https://s.m.taobao.com/h5?event_submit_do_new_search_auction=1&_input_charset=utf-8&topSearch=1&atype=b&searchfrom=1&action=home%3Aredirect_app_action&from=1&sst=1&n=20&buying=buyitnow&q=${keyword}`;
    }
  }
}

本地存储文件 assets/js/storage.js

const storage = window.localStorage;

export default {
 set(key, val) {
  if (val === undefined) {
   return;
  }
  storage.setItem(key, serialize(val));
 },
 get(key, def) {
  const val = deserialize(storage.getItem(key));
  return val === undefined ? def : val;
 },
 remove(key) {
  storage.removeItem(key);
 },
 clear() {
  storage.clear();
 }
};

function serialize(val) {
 return JSON.stringify(val);
}

function deserialize(val) {
 if (typeof val !== 'string') {
  return undefined;
 }
 try {
  return JSON.parse(val);
 } catch (e) {
  return val || undefined;
 }
}

 搜索页配置文件 src/pages/search/config.js

const prefix = 'mall-search';
const suffix = 'key';
export const SEARCH_HISTORY_KEYWORD_KEY = `${prefix}-history-keyword-${suffix}`;

历史搜索组件

vue搜索页开发实例代码详解（热门搜索，历史搜索，淘宝接口演示）

src/pages/search/history.vue

<template>
 <div class="history" v-if="historys.length">
  <h4 class="history-title">历史搜索</h4>
  <transition-group class="g-list" tag="ul" name="list">
   <li class="g-list-item" v-for="item in historys" :key="item" @click="$_selectItem(item)">
     <span class="g-list-text">{{item}}</span>
     <!-- .stop 禁止事件冒泡 -->
     <i class="iconfont icon-delete" @click.stop="removeItem(item)"></i>
   </li>
  </transition-group>
  <a href="javascript:;" rel="external nofollow" class="history-btn" @click="showConfirm">
    <i class="iconfont icon-clear" ></i>
    清空历史搜索
  </a>
 </div>
</template>

<script>
import storage from 'assets/js/storage';
import {SEARCH_HISTORY_KEYWORD_KEY} from 'pages/search/config';
import {searchMixin} from 'api/mixins';


export default {
  name:'SearchHistory',
  data(){
    return{
      historys:[]
    }
  },
  mixins:[searchMixin],
  created(){
    this.getKeyword();
  },
  methods:{
    update(){
     this.getKeyword();
    },
    getKeyword(){
      this.historys=storage.get(SEARCH_HISTORY_KEYWORD_KEY,[]);
      this.$emit('loaded');
    },
    removeItem(item){
     this.historys=this.historys.filter(val=>val!==item);//点击后删除该项
     storage.set(SEARCH_HISTORY_KEYWORD_KEY,this.historys);//更新缓存
     this.$emit('remove-item');
    },
    showConfirm(){
     this.$emit('show-confirm');
    },
    clear(){
     storage.remove(SEARCH_HISTORY_KEYWORD_KEY);
    }
  }
}
</script>

<style lang="scss" scoped>

  $border-color: #e5e5e5;
  $font-size-base: 12px;
  $font-size-l: $font-size-base + 2;
  $border-color: #e5e5e5;

  @mixin flex-center($direction: row) {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: $direction;
  }

 .history {
  padding-bottom: 30px;
  background-color: #fff;

  &-title {
   height: 34px;
   line-height: 34px;
   padding: 0 10px;
   font-size: $font-size-l;
   font-weight: bold;
  }

  &-btn {
   @include flex-center();
   width: 80%;
   height: 40px;
   background: none;
   border: 1px solid #ccc;
   border-radius: 4px;
   margin: 0 auto;
   color: #686868;

   .iconfont {
    margin-right: 5px;
   }
  }
 }

 .g-list {
  border-top: 1px solid $border-color;
  border-bottom: 1px solid $border-color;
  margin-bottom: 20px;
 }

 .list {
  &-enter-active,
  &-leave-active {
   transition: height 0.1s;
  }

  &-enter,
  &-leave-to {
   height: 0;
  }
 }

</style>

列表样式统一抽离出去

src/assets/scss/_list.scss

// list
@mixin flex-between() {
  display: flex;
  justify-content: space-between;
  align-items: center;
 }

//ellipsis
@mixin ellipsis() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
 }

 $border-color: #e5e5e5;
 
.g-list {
 padding-left: 10px;
}
.g-list-item {
 overflow: hidden;
 @include flex-between();
 height: 44px;
 padding-right: 10px;
 border-bottom: 1px solid $border-color;
 color: #686868;

 &:last-child {
  border-bottom: none;
 }
}
.g-list-text {
 flex: 1;
 line-height: 1.5;
 @include ellipsis();
}

src/assets/scss/index.scss

@import 'icons';
@import 'list';

*{
  margin:0;
  padding:0;
}
html,body{
  // 必须设置，否则内容滚动效果无法实现
  width:100%;
  height:100%;
}
ul,li{
  list-style:none;
}
a{
  text-decoration: none;
  color:#333;
}

确认框组件

vue搜索页开发实例代码详解（热门搜索，历史搜索，淘宝接口演示）

src/components/comfirm/index.vue

<template>
  <transition name="mine-confirm">
    <div class="mine-confirm-wrapper" v-show="visible">
      <div class="mine-confirm">
        <div class="mine-confirm-title">{{title}}</div>
        <div class="mine-confirm-msg">{{msg}}</div>
        <div class="mine-confirm-btns">
          <button class="mine-confirm-btn mine-confirm-cancel" @click="cancel">{{cancelBtnText}}</button>
          <button class="mine-confirm-btn mine-confirm-ok" @click="confirm">{{confirmBtnText}}</button>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  name:'MineConfirm',
  props:{
    title:{
      type:String,
      default:''
    },
    msg:{
      type:String,
      default:'确定执行此操作吗？'
    },
    cancelBtnText:{
      type:String,
      default:'取消'
    },
    confirmBtnText:{
      type:String,
      default:'确定'
    }
  },
  data(){
    return{
      visible:false
    }
  },
  methods:{
    show(){
      this.visible=true;
    },
    hide(){
      this.visible=false;
    },
    cancel(){
      this.hide();
      this.$emit('cancel');
    },
    confirm(){
      this.hide();
      this.$emit('confirm');
    }
  }
}
</script>

<style lang="scss" scoped>

$search-z-index: 1200;
$search-popup-z-index: $search-z-index + 10;
$modal-bgc: rgba(0, 0, 0, 0.4);

@mixin flex-center($direction: row) {
 display: flex;
 justify-content: center;
 align-items: center;
 flex-direction: $direction;
}
@mixin ellipsis() {
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

 .mine-confirm-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: $search-popup-z-index;
  @include flex-center();
  background-color: $modal-bgc;
 }

 .mine-confirm {
  overflow: hidden;
  width: 88%;
  background-color: #fff;
  border-radius: 10px;
  font-size: 16px;

  &-title {
   padding: 20px 15px 0;
   font-size: 18px;
   text-align: center;
   @include ellipsis();

   & + .mine-confirm-msg {
    padding-top: 20px;
    padding-bottom: 20px;
   }
  }

  &-msg {
   padding: 40px 15px;
   text-align: center;
   line-height: 1.5;
  }

  &-btns {
   display: flex;
  }

  &-btn {
   flex: 1;
   height: 44px;
   line-height: 44px;
   background: none;
   border: none;
  }

  &-cancel {
   border-top: 1px solid #e3e5e9;
  }

  &-ok {
   background-color: #f23030;
   color: #fff;
  }
 }

 .mine-confirm {
  &-enter-active,
  &-leave-active {
   transition: opacity 0.3s;
  }

  &-enter,
  &-leave-to {
   opacity: 0;
  }

  &-enter-active {
   .mine-confirm {
    animation: bounce-in 0.3s;
   }
  }
 }

 // https://cn.vuejs.org/v2/guide/transitions.html#CSS-动画
 @keyframes bounce-in {
  0% {
   transform: scale(0);
  }
  50% {
   transform: scale(1.1);
  }
  100% {
   transform: scale(1);
  }
 }
</style>

 搜索结果页

vue搜索页开发实例代码详解（热门搜索，历史搜索，淘宝接口演示）

src/pages/search/result.vue

<template>
  <div class="result">
  <div class="loading-container" v-show="loading">
   <me-loading/>
  </div>
  <ul class="g-list" v-show="!loading && results.length">
   <li
    class="g-list-item"
    v-for="(item, index) in results"
    :key="index"
    @click="$_selectItem(item[0])"
   >
    <span class="g-list-text">{{item[0]}}</span>
   </li>
  </ul>
  <div class="no-result" v-show="!loading && !results.length">没有结果</div>
 </div>
</template>

<script>
 import MeLoading from 'components/loading';
 import {getSearchResult} from 'api/search';
 import {searchMixin} from 'api/mixins';

export default {
  name:'SearchResult',
  components:{
    MeLoading
  },
  data(){
    return{
      results:[],
      loading:false
    }
  },
  props:{
    query:{
      type:String,
      default:''
    }
  },
  mixins:[searchMixin],
  watch:{
    query(query){
      
      this.getResults(query);
    }
  },
  methods:{
    getResults(keyword){
      if(!keyword){
        return;
      }

      this.loading=true;
      getSearchResult(keyword).then(data=>{
        console.log(data);
        if(data){
          
          this.results=data;
          this.loading=false;
        }
      })
    }
  }
}
</script>

修改src/api/search.js

import axios from 'axios';
import jsonp from 'assets/js/jsonp';

//获取热门搜索数据 ajax
export const getHot=()=>{
  return axios.get('http://www.imooc.com/api/search/hot').then(res=>{
    
    res=res.data.hotKeyWord;
    if(res && res.owner){
      return res.owner;
    }
    throw new Error('没有成功获取到数据');

  }).catch(err=>{
    console.log(err);
  });
}

//获取搜索框的搜索结果
export const getSearchResult=keyword=>{
  const url='https://suggest.taobao.com/sug';
  
  const params={
    q:keyword,
    code:'utf-8',
    area:'c2c',
    nick:'',
    sid:null
  };
  //https://suggest.taobao.com/sug?q=apple&code=utf-8&area=c2c&nick=&sid=null&callback=jsonp5
  return jsonp(url, params, {
    param: 'callback'
   }).then(res => {
     console.log(res);
    if (res.result) {
      // console.log(res);
      return res.result;
    }

    throw new Error('没有成功获取到数据！');
  }).catch(err => {
    if (err) {
      console.log(err);
    }
  });
};

最后，当删除历史搜索之后，也需要更新滚动条

修改src/pages/search/index.vue

vue搜索页开发实例代码详解（热门搜索，历史搜索，淘宝接口演示）

修改src/pages/search/history.vue

（因为页面加载时有100ms延迟的动画，因此这里更新滚动条也需要相同的延迟）

vue搜索页开发实例代码详解（热门搜索，历史搜索，淘宝接口演示）

注意滚动条组件的更新操作，需要使用 $nextTick( ) 实现异步

vue搜索页开发实例代码详解（热门搜索，历史搜索，淘宝接口演示）

总结

到此这篇关于vue搜索页开发（热门搜索，历史搜索，淘宝接口演示）的文章就介绍到这了,更多相关vue搜索页开发内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木！

vue搜索页开发实例代码详解（热门搜索，历史搜索，淘宝接口演示）

- Author -

陈莺莺呀

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
非常好的js代码
Jun 27 Javascript
在b/s开发中经常用到的javaScript技术
Aug 23 Javascript
JScript的条件编译
May 29 Javascript
清空上传控件input file的值
Jul 03 Javascript
JavaScript自定义事件介绍
Aug 29 Javascript
javascript动态创建链接的方法
May 13 Javascript
原生js和jQuery实现淡入淡出轮播效果
Dec 25 Javascript
jQuery Validate验证表单时多个name相同的元素只验证第一个的解决方法
Dec 24 Javascript
Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
Oct 12 Javascript
详解javascript中的Error对象
Apr 25 Javascript
vue中使用WX-JSSDK的两种方法(推荐)
Jan 18 Javascript
JS如何调用WebAssembly编译出来的.wasm文件
Nov 05 Javascript
JavaScript实现轮播图特效
Apr 10 #Javascript
JavaScript实现图片伪异步上传过程解析
Apr 10 #Javascript
Vue实现Layui的集成方法步骤
Apr 10 #Javascript
如何基于layui的laytpl实现数据绑定的示例代码
Apr 10 #Javascript
vue-drag-chart 拖动/缩放图表组件的实例代码
Apr 10 #Javascript
vue+vant使用图片预览功能ImagePreview的问题解决
Apr 10 #Javascript
JS实现省市县三级下拉联动
Apr 10 #Javascript
V Rising(1) Tablespace(1) Navicat(1) harbor(1) 自定义函数(1) 内置函数(1) procedure(1) maven(2) GoFrame(3) commit(1)
You might like
一个可查询所有表的“通用”查询分页类
2006/10/09 PHP
关于js和php对url编码的处理方法
2014/03/04 PHP
开源php中文分词系统SCWS安装和使用实例
2014/04/11 PHP
destoon网站转移服务器后搜索汉字出现乱码的解决方法
2014/06/21 PHP
phplist及phpmailer(组合使用)通过gmail发送邮件的配置方法
2016/03/30 PHP
利用PHP获取访客IP、地区位置、浏览器及来源页面等信息
2017/06/27 PHP
js冒泡法和数组转换成字符串示例代码
2013/08/14 Javascript
js整数字符串转换为金额类型数据(示例代码)
2013/12/26 Javascript
JS保留两位小数,多位小数的示例代码
2014/01/07 Javascript
详谈jQuery操纵DOM元素属性 attr()和removeAtrr()方法
2015/01/22 Javascript
值得分享的Bootstrap Ace模板实现菜单和Tab页效果
2015/12/30 Javascript
javascript跨域请求包装函数与用法示例
2016/11/03 Javascript
JS实现图片垂直居中显示小结
2016/12/13 Javascript
jQuery监听浏览器窗口大小的变化实例
2017/02/07 Javascript
bootstrap模态框关闭后清除模态框的数据方法
2018/08/10 Javascript
NodeJS服务器实现gzip压缩的示例代码
2018/10/12 NodeJs
bootstrap-table实现表头固定以及列固定的方法示例
2019/03/07 Javascript
浅谈Vue.js 关于页面加载完成后执行一个方法的问题
2019/04/01 Javascript
深入学习JavaScript 高阶函数
2019/06/11 Javascript
Vue-CLI与Vuex使用方法实例分析
2020/01/06 Javascript
Jquery如何使用animation动画效果改变背景色的代码
2020/07/20 jQuery
Python编程中实现迭代器的一些技巧小结
2016/06/21 Python
Python requests库用法实例详解
2018/08/14 Python
python 获取utc时间转化为本地时间的方法
2018/12/31 Python
Selenium基于PIL实现拼接滚动截图
2020/04/10 Python
如何清空python的变量
2020/07/05 Python
python中Django文件上传方法详解
2020/08/05 Python
英语专业大学生求职简历的自我评价
2013/10/18 职场文书
应届生求职推荐信
2013/10/28 职场文书
车间组长岗位职责
2013/12/20 职场文书
小学毕业感言50字
2014/02/16 职场文书
房屋委托书范本
2014/04/04 职场文书
四风查摆剖析材料
2014/10/10 职场文书
幼儿园托班开学寄语（2016春季）
2015/12/03 职场文书
2016大学生党校学习心得体会
2016/01/06 职场文书
2016年心理学教育培训学习心得体会
2016/01/12 职场文书