vue使用vue-awesome-swiper实现上拉加载更多的效果

效果图

 

src/components/scroll/index.vue

 

src/pages/home/index.vue

 

src/pages/home/recommend.vue

 

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'){
            console.log("加载更多...");
            return res;
        }

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