1、安裝jsonp
cnpm install --save jsonp
2、jsonp API
jsonp( url, opts, fn )
3、封裝jsonp方法
src/assets/js/jsonp.js
import jsonp from 'jsonp'; /*data格式案例 { id:1, name:'cyy' } */ const parseParam=param=>{ /*將data格式轉換為 [ [id,1], [name,cyy] ] */ let arr=[]; for(const key in param){ arr.push([key,param[key]]); } /*先將data格式轉換為 [ id=1, name=cyy ] */ /*再將data格式轉換為 id=1&name=cyy */ return arr.map(value=https://www.cnblogs.com/chenyingying0/p/>value.join("=")).join('&'); } export default (url,data,options)=>{ // 如果存在？，則url后面加&；如果不存在則加? url+=((url.indexOf('?')<0) ? '?' : '&' ) + parseParam(data); return new Promise((resolve,reject)=>{ //jsonp用法，三個引數：jsonp(url,options,callback) jsonp(url,options,(err,data)=>{ if(err){ reject(err); }else{ resolve(data); } }) }) }
4、呼叫jsonp方法
src/api/recommend.js
import jsonp from 'assets/js/jsonp'; //獲取熱門推薦資料 export const getHomeRecommend=(page=1,psize=20)=>{ const url='https://ju.taobao.com/json/tg/ajaxGetItemsV2.json'; const params={ page, psize, type:0, frontCatId:''//type和frontCatId是根據給定的淘寶介面來添加的 } //呼叫jsonp獲取資料 return jsonp(url,params,{ param:'callback' }).then(res=>{ if(res.code==='200'){ return res; } throw new Error('沒有成功獲取到資料'); }).catch(err=>{ if(err){ console.log(err); } }); }
5、通過jsonp獲取熱門推薦的資料，并渲染到頁面上
src/pages/home/recommend.vue
<template>
<div >
<h3 >熱賣推薦</h3>
<div v-if="!recommends.length">
<me-loading inline />
</div>
<ul >
<li v-for="(item,index) in recommends" :key="index">
<router-link :to="{name:'home-product',params:{id:item.baseinfo.itemId}}">
<p ><img :src="https://www.cnblogs.com/chenyingying0/p/item.baseinfo.picUrl"></p>
<p >{{item.name.shortName}}</p>
<p ><del>￥{{item.price.origPrice}}</del></p>
<p >
<span >￥<strong >{{item.price.actPrice}}</strong></span>
<span >{{item.remind.soldCount}}件已售</span>
</p>
</router-link>
</li>
</ul>
</div>
</template>
<script>
import {getHomeRecommend} from 'api/recommend';
import MeLoading from 'components/loading';
export default {
name:"Recommend",
data(){
return {
recommends:[],
curPage:1,
totalPage:1
}
},
components:{
MeLoading
},
created(){
this.getRecommends();
},
methods:{
getRecommends(){
if(this.curPage>this.totalPage) return Promise.reject(new Error('沒有更多了'));
return getHomeRecommend(this.curPage).then(data=https://www.cnblogs.com/chenyingying0/p/>{
return new Promise(resolve=>{
if(data){
console.log(data);
this.curPage++;
this.totalPage=data.totalPage;
// concat合并陣列內容，每次獲取的資料都追加進來
this.recommends=this.recommends.concat(data.itemList);
this.$emit("loaded",this.recommends);//熱門推薦區域加載完畢后觸發訊息
resolve();
}
})
});
}
}
}
</script>
<style lang="scss" scoped>
.recommend{
position:relative;
width:100%;
padding:10px 0;
font-size:14px;
text-align:center;
background:#fff;
&:before,
&:after{
content:"";
display:block;
position:absolute;
top:14%;
width:40%;
height:1px;
background:#ddd;
}
&:before{
left:0;
}
&:after{
right:0;
}
}
.recommend-list{
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap:wrap;
}
.recommend-title{
margin-bottom:8px;
}
.recommend-item{
width:49%;
background:#fff;
box-shadow:0 1px 1px 0 rgba(0,0,0,0.12);
margin-bottom:8px;
}
.recommend-link{
display:block;
}
.recommend-pic{
position:relative;
width:100%;
padding-top:100%;// 可以實作高度與寬度一致
margin-bottom:5px;
}
.recommend-img{
width:100%;
position:absolute;
top:0;
left:0;
height:100%;
}
.recommend-name{
height:40px;
padding:0 5px;
margin-bottom:8px;
line-height:1.5;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
white-space: normal !important;
word-wrap: break-word;
text-align:left;
}
.recommend-oriPrice{
padding:0 5px;
margin-bottom:8px;
color:#ccc;
text-align:left;
}
.recommend-info{
display: flex;
justify-content: space-between;
align-items: center;
padding:0 5px;
margin-bottom:8px;
}
.recommend-price{
color:#e61414;
&-num{
font-size:20px;
}
}
.recommend-count{
color:#999;
}
.loading-container{
padding-top:80px;
}
</style>
6、首頁中使用recommend組件
src/pages/home/index.vue
<template>
<div >
<scrollbar :data="https://www.cnblogs.com/chenyingying0/p/recommends">
<slider />
<home-nav />
<!-- 熱門推薦加載完成后更新滾動條 -->
<recommend @loaded="updateScroll" />
</scrollbar>
<!-- 該頁面自己的子路由 -->
<router-view></router-view>
</div>
</template>
<script>
import Slider from 'components/slider';
import Scrollbar from 'components/scroll';
import HomeNav from './nav';
import Recommend from './recommend';
export default {
name:"Home",
components:{
Slider,
Scrollbar,
HomeNav,
Recommend
},
data(){
return{
recommends:[]
}
},
methods:{
updateScroll(recommends){
this.recommends=recommends;
}
}
}
</script>
<style scoped>
.home{
width:100%;
height:100%;
}
</style>
7、修改scroll組件，在熱門推薦加載之后更新滾動條
src/components/scroll/index.vue
<template>
<swiper :options="swiperOption" ref="swiper">
<swiper-slide>
<!-- 所有內容放在插槽里 -->
<slot></slot>
</swiper-slide>
<div slot="scrollbar"></div>
</swiper>
</template>
<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper';
import 'swiper/css/swiper.css';
export default {
name: 'Scrollbar',
title: 'Scrollbar',
components: {
Swiper,
SwiperSlide
},
data() {
return {
swiperOption: {
scrollbar: {
el: '.swiper-scrollbar',
hide: true
},
direction:'vertical',
slidesPerView:'auto',
freeMode:true,
setWrapperSize:true
}
}
},
props:{
recommends:{
type:[Array,Object],
default(){
return [];
}
}
},
watch:{//當recommends值發生改變時
recommends(){
this.$refs.swiper && this.$refs.swiper.$swiper.update();//更新滾動條長度
}
}
}
</script>
<style lang="scss" scoped>
.swiper-container{
width:100%;
height:100%;
overflow:hidden;
}
.swiper-wrapper{
height:auto;
}
.swiper-slide{
height:auto;
}
</style>
效果圖
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/134939.html
標籤：JavaScript
上一篇：vue實作首頁導航面板組件