vue使用vue-awesome-swiper實作上拉加載更多的效果-有解無憂

效果圖

src/components/scroll/index.vue

<template>
    <!-- 通過ref可以獲取到dom物件 -->
    <swiper  :options="swiperOption" ref="swiper">
      <div >
          <me-loading :text="pullDownText" inline ref="pullDownLoading" />
      </div>
      <swiper-slide>
          <!-- 所有內容放在插槽里 -->
          <slot></slot>
      </swiper-slide>
      <div >
          <me-loading :text="pullUpText" inline ref="pullUpLoading" />
      </div>
      <div  slot="scrollbar"></div>
  </swiper>
</template>

<script>
  import { Swiper, SwiperSlide } from 'vue-awesome-swiper';
  import 'swiper/css/swiper.css';
  import MeLoading from 'components/loading';

  export default {
    name: 'Scrollbar',
    title: 'Scrollbar',
    components: {
      Swiper,
      SwiperSlide,
      MeLoading
    },
    data() {
      return {
        pulling:false,//是否正在下拉中
        pullDownText:'向下拉動會重新加載幻燈片哦',
        pullUpText:'向上拉動會加載更多哦',
        swiperOption: {
          scrollbar: {
            el: '.swiper-scrollbar',
            hide: true
          },
          direction:'vertical',
          slidesPerView:'auto',
          freeMode:true,
          setWrapperSize:true,
          on:{//下拉重繪時觸發的事件
            sliderMove:this.sliderMove,//一開始使用sliderMove，有bug
            touchEnd:this.touchEnd
          }
        },
      }
    },
    props:{
      recommends:{
        type:[Array,Object],
        default(){
          return [];
        }
      }
    },
    watch:{//當recommends值發生改變時
      recommends(){
        this.$refs.swiper && this.$refs.swiper.$swiper.update();//更新滾動條長度
      }
    },
    methods:{
      sliderMove(){
        if(this.pulling) return;//正在下拉中，則不重復下拉

        const swiper=this.$refs.swiper.$swiper;

        if(swiper.translate>0){//向下拉
          if(swiper.translate>100){//超出規定的高度
            this.$refs.pullDownLoading.setText("開始下拉...");
          }else{
            this.$refs.pullDownLoading.setText("向下拉動會重新加載幻燈片哦");
          }
        }else if(swiper.isEnd){//上拉

          //是否達到上拉的觸發條件
          //swiper的位移加上swiper的高度（617px）-50px的值如果大于當前內容高度
          //swiper.translate這個屬性可以獲取到wrapper的位移，其實可以理解為滾動條滾動的距離
          //swiper.height這個屬性獲取swiper容器的高度， 也就是顯示區域的高度
          //50px是我們設定的一個值，為了讓頁面不是到達最低部的時候，可以提前加載內容
          //parseInt(swiper.$wrapperEl.css('height'))是wrapper的HTML元素的height屬性， 也就是所有內容的高度
          const isPullUp=Math.abs(swiper.translate)+swiper.height-50 > parseInt(swiper.$wrapperEl.css('height'));

          if(isPullUp){//開始上拉
            this.$refs.pullUpLoading.setText("開始上拉");
          }else{//保持初始化
            this.$refs.pullUpLoading.setText('向上拉動會加載更多哦');
          }
        }
      },
      touchEnd(){

        if(this.pulling) return;//正在下拉中，則不重復下拉

        const swiper=this.$refs.swiper.$swiper;
        
        if(swiper.translate>100){

          this.pulling=true;//正在下拉中

          swiper.allowTouchMove=false;//禁止觸摸
          swiper.setTransition(swiper.params.speed);//設定初始速度
          swiper.setTranslate(100);//移動到設定的位置（拖動過度時回到設定的位置）
          swiper.params.virtualTranslate=true;//定住不給回彈
          this.$refs.pullDownLoading.setText("正在下拉中...");//設定正在重繪中的文字
          this.$emit("pull-down",this.pullDownEnd);//觸發訊息，傳遞結束下拉的函式
        }else if(swiper.isEnd){//上拉
          //是否達到上拉的觸發條件
          const isPullUp=Math.abs(swiper.translate)+swiper.height-30>parseInt(swiper.$wrapperEl.css('height'));

          if(isPullUp){//開始上拉
            
            this.pulling=true;

            swiper.allowTouchMove=false;//禁止觸摸
            swiper.setTransition(swiper.params.speed);//設定初始速度
            swiper.setTranslate(-(parseInt(swiper.$wrapperEl.css('height'))+50-swiper.height));//超過拉動距離時回彈
            swiper.params.virtualTranslate=true;//定住不給回彈
            this.$refs.pullUpLoading.setText("正在上拉中...");//設定正在重繪中的文字
            this.$emit("pull-up",this.pullUpEnd);//觸發訊息，傳遞結束下拉的函式
          }
        }
      },
      pullDownEnd(){
        const swiper=this.$refs.swiper.$swiper;

        this.pulling=false;//下拉結束

        this.$refs.pullDownLoading.setText("下拉結束");//設定加載結束后的文字
        swiper.allowTouchMove=true;//可以觸摸
        swiper.setTransition(swiper.params.speed);//設定初始速度           
        swiper.params.virtualTranslate=false;//可以回彈
        swiper.setTranslate(0);//移動到最初的位置
        
      },
      pullUpEnd(){
        const swiper=this.$refs.swiper.$swiper;

        this.pulling=false;

        this.$refs.pullUpLoading.setText("上拉結束");//設定加載結束后的文字
        swiper.allowTouchMove=true;//可以觸摸           
        swiper.params.virtualTranslate=false;//可以回彈
      }
    }
  }
</script>

<style lang="scss" scoped>
    .swiper-container{
      width:100%;
      height:100%;
      overflow:hidden;
    }
    .swiper-slide{
      height:auto;
    }
    .mine-scroll-pull-down{
        position:absolute;
        left:0;
        bottom:100%;
        width:100%;
        height:80px;
    }
    .mine-scroll-pull-up{
        position:absolute;
        left:0;
        top:100%;
        width:100%;
        height:30px;
    }
</style>

src/pages/home/index.vue

<template>
    <div >
        <scrollbar :data="https://www.cnblogs.com/chenyingying0/p/recommends" @pull-down="pullRefresh" @pull-up="loadMore">
            <slider ref="mySwiper" />
            <home-nav />
            <!-- 熱門推薦加載完成后更新滾動條 -->
            <recommend @loaded="updateScroll" ref="recommend" />
        </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;
        },
        pullRefresh(end){//重繪輪播圖
            this.$refs.mySwiper.getSliders().then(end);
        },
        loadMore(end){//加載更多
            this.$refs.recommend.getRecommends().then(end).catch(err=>{
                if(err){//沒有更多圖片了
                    console.log(err);
                }
                end();
            });
        }
    }
}
</script>

<style scoped>
    .home{
        width:100%;
        height:100%;
    }
</style>

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 ><img  v-lazy="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;
    }
    .recommend-list{
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap:wrap;
    }
    .recommend-title{
        margin-bottom:15px;
        position:relative;

        &:before,
        &:after{
            content:"";
            display:block;
            position:absolute;
            top:50%;
            width:40%;
            height:1px;
            background:#ddd;
        }

        &:before{
            left:0;        
        }

        &:after{
            right:0;
        }
    }
    .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>

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);
        }
        
    });
    
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/131627.html

標籤：JavaScript

上一篇：函式的兩種創建自定義方式

下一篇：vue實作回傳頂部組件