@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; }
确认框组件
src/components/comfirm/index.vue
<template> <transition> <div v-show="visible"> <div> <div>{{title}}</div> <div>{{msg}}</div> <div> <button @click="cancel">{{cancelBtnText}}</button> <button @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>
搜索结果页
src/pages/search/result.vue
<template> <div> <div v-show="loading"> <me-loading/> </div> <ul v-show="!loading && results.length"> <li v-for="(item, index) in results" :key="index" @click="$_selectItem(item[0])" > <span>{{item[0]}}</span> </li> </ul> <div 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
修改src/pages/search/history.vue
（因为页面加载时有100ms延迟的动画，因此这里更新滚动条也需要相同的延迟）
注意滚动条组件的更新操作，需要使用 $nextTick( ) 实现异步
总结