Vue webAPP首頁開發(三)

来源:https://www.cnblogs.com/chenyingying0/archive/2020/04/04/12635080.html

接上篇 https://www.cnblogs.com/chenyingying0/p/12623653.html 下拉刷新 下拉刷新--變化提示文字 base/scroll/index.vue <template> <!-- wiper會實例化構造函數,生成swiper實例 --> <!-- re ...


接上篇 https://www.cnblogs.com/chenyingying0/p/12623653.html

 

下拉刷新

下拉刷新--變化提示文字

 

base/scroll/index.vue

<template>
    <!-- wiper會實例化構造函數,生成swiper實例 -->
    <!-- ref="swiper"能夠獲取到這個swiper實例 -->
    <swiper :options="swiperOption" ref='swiper'>
        <div class="mine-scroll-pull-down" v-if="pullDown">
            <!-- ref="pullDownLoading" -- 獲取下拉的loading -->
            <me-loading :text="pullDownText" inline ref="pullDownLoading" />
        </div>
        <swiper-slide>
            <slot></slot>
        </swiper-slide>
        <div class="swiper-scrollbar" v-if="scrollbar" slot="scrollbar"></div>
    </swiper>
</template>

<script>
// 組件首字母大寫,否則會報錯
import {Swiper,SwiperSlide} from 'vue-awesome-swiper';
import MeLoading from 'base/loading';

import {
    PULL_DOWN_HEIGHT,
    PULL_DOWN_TEXT_INIT,
    PULL_DOWN_TEXT_START,
    PULL_DOWN_TEXT_ING,
    PULL_DOWN_TEXT_END
} from './config';

export default {
    name:"MeScroll",
    components:{
        Swiper,
        SwiperSlide,
        MeLoading
    },
    props:{//過濾器
       scrollbar:{
           type:Boolean,
           default:true
       },
       data:{//熱門推薦載入完成後傳遞過來的recommends數據
           type:[Array,Object]         
       },
       pullDown:{
           type:Boolean,
           default:false
       }
    },
    data(){
        return {
            pullDownText:PULL_DOWN_TEXT_INIT,//設置初始化文字
            swiperOption:{
                direction:'vertical',//垂直方向
                slidesPerView:'auto',//一次顯示幾張
                freeMode:true,//任意滑動多少距離
                setWrapperSize:true,//根據內容設置容器尺寸
                scrollbar:{
                    el:this.scrollbar?'.swiper-scrollbar':null,
                    hide:true //滾動條自動隱藏
                },
                on:{
                    //swiper配置時會觸發sliderMove方法,這裡調用時執行自定義的scroll方法
                    sliderMove:this.scroll
                }

            }
        }
    },
    methods:{
        update(){//不知道怎麼寫就去swiper官網查api
            console.log(this.$refs.swiper);//列印swiper實例

            this.$refs.swiper && this.$refs.swiper.$swiper.update();//調用swiper.update()更新滾動條
        },
        scroll(){
            const swiper=this.$refs.swiper.$swiper;
            console.log(swiper.translate);//列印出滾動條滾過的距離
            if(swiper.translate>0){//下拉
                if(!this.pullDown){//如果不需要下拉刷新
                    return;
                }
                if(swiper.translate>PULL_DOWN_HEIGHT){
                    this.$refs.pullDownLoading.setText(PULL_DOWN_TEXT_START);
                }else{
                    this.$refs.pullDownLoading.setText(PULL_DOWN_TEXT_INIT);
                }
            }
        }
    },
    watch:{//檢測數據變化的事件
        data(){
            this.update();//data數據變化時執行update函數
        }
    }
}
</script>

<style lang="scss" scoped>
    @import '~assets/scss/mixins';

    .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;
    }
     
</style>

 

base/loading/index.vue

<template>
    <div class="mine-loading" :class="{'me-loading-inline':inline}">
        <span class="mine-loading-indicator" v-if="indicator==='on'" >
            <img src="./loading.gif" alt="">
        </span>
        <span class="mine-loading-text" v-if="loadingText">{{loadingText}}</span>
    </div>
</template>

<script>
export default {
   name:"MeLoading",
   props:{//過濾器
       indicator:{
           type:String,
           default:'on',
           validator(value){
               return ['on','off'].indexOf(value)>-1;
           }
       },
       text:{
           type:String,
           default:'載入中...'
       },
        inline:{
            type:Boolean,
            default:false
        }
   },
   data(){
       return{
           loadingText:this.text
       }
   },
   methods:{
       setText(text){
           this.loadingText=text;
       }
   },
   watch:{
       text(text){
           this.loadingText=text;
       }
   }
}
</script>

<style lang="scss" scoped>
    @import '~assets/scss/mixins';

    .mine-loading{
        width:100%;
        height:100%;
        @include flex-center(column);

        //圖文左右排列時
        &.me-loading-inline{
            flex-direction: row;
           
            .mine-loading-indicator ~ .mine-loading-text{
                margin-top:0px;
                margin-left:7px;
            }
        }

        .mine-loading-indicator{

        }

        // 存在.mine-loading-indicator和.mine-loading-text時
        .mine-loading-indicator ~ .mine-loading-text{
            margin-top:7px;
        }
    }
</style>

 

base/scroll/config.js

export const PULL_DOWN_HEIGHT=100;
export const PULL_DOWN_TEXT_INIT='再拉,再拉就刷新給你看';
export const PULL_DOWN_TEXT_START='夠了啦,鬆開人家嘛';
export const PULL_DOWN_TEXT_ING='刷的好累呀,喵~';
export const PULL_DOWN_TEXT_END='刷新完啦';

 

pages/home/index.vue

<template>
    <div class="home">
        <header class="g-header-container">
            <!-- 沒有內容自閉合即可-->
            <home-header/>
        </header> 
        <!-- 滾動條接收到數據後開始更新 -->
        <!-- pullDown是布爾值,可以使用簡寫直接傳入,不加冒號 -->
        <me-scroll :data="recommends" pullDown>
            <home-slider />
            <home-nav />
            <!-- 接收熱門推薦載入完畢的消息 -->
            <home-recommend @loaded="getRecommends" />
        </me-scroll>
        <div class="g-backup-container"></div>
        <!-- 當前頁面存在二級頁面時需要使用router-view -->
        <router-view></router-view>
    </div>
</template>

<script>
import MeScroll from 'base/scroll';
import HomeHeader from './header';
import HomeSlider from './slider';
import HomeNav from './nav';
import HomeRecommend from './recommend';


export default {
    name:"Home",
    components:{
        HomeHeader,
        HomeSlider,
        MeScroll,
        HomeNav,
        HomeRecommend
    },
    data(){
        return{
            recommends:[]
        }
    },
    methods:{
        getRecommends(recommends){
            this.recommends=recommends;
        },
        updateScroll(){

        }
    }
}
</script>

<style lang="scss" scoped>
    // 引入前面需要加波浪線,否則會報錯
    @import "~assets/scss/mixins";
    .home{
        overflow:hidden;
        width:100%;
        height:100%;
        background:$bgc-theme;
    }

</style>

 

效果圖

 

下拉刷新--鬆手刷新

修改base/scroll/index.vue

<template>
    <!-- wiper會實例化構造函數,生成swiper實例 -->
    <!-- ref="swiper"能夠獲取到這個swiper實例 -->
    <swiper :options="swiperOption" ref='swiper'>
        <div class="mine-scroll-pull-down" v-if="pullDown">
            <!-- ref="pullDownLoading" -- 獲取下拉的loading -->
            <me-loading :text="pullDownText" inline ref="pullDownLoading" />
        </div>
        <swiper-slide>
            <slot></slot>
        </swiper-slide>
        <div class="swiper-scrollbar" v-if="scrollbar" slot="scrollbar"></div>
    </swiper>
</template>

<script>
// 組件首字母大寫,否則會報錯
import {Swiper,SwiperSlide} from 'vue-awesome-swiper';
import MeLoading from 'base/loading';

import {
    PULL_DOWN_HEIGHT,
    PULL_DOWN_TEXT_INIT,
    PULL_DOWN_TEXT_START,
    PULL_DOWN_TEXT_ING,
    PULL_DOWN_TEXT_END
} from './config';

export default {
    name:"MeScroll",
    components:{
        Swiper,
        SwiperSlide,
        MeLoading
    },
    props:{//過濾器
       scrollbar:{
           type:Boolean,
           default:true
       },
       data:{//熱門推薦載入完成後傳遞過來的recommends數據
           type:[Array,Object]         
       },
       pullDown:{
           type:Boolean,
           default:false
       }
    },
    data(){
        return {
            pulling:false,//是否正在下拉
            pullDownText:PULL_DOWN_TEXT_INIT,//設置初始化文字
            swiperOption:{
                direction:'vertical',//垂直方向
                slidesPerView:'auto',//一次顯示幾張
                freeMode:true,//任意滑動多少距離
                setWrapperSize:true,//根據內容設置容器尺寸
                scrollbar:{
                    el:this.scrollbar?'.swiper-scrollbar':null,
                    hide:true //滾動條自動隱藏
                },
                on:{
                    //swiper配置時會觸發sliderMove方法,這裡調用時執行自定義的scroll方法
                    sliderMove:this.scroll,
                    touchEnd:this.touchEnd//touchEnd是swiper提供的滾動結束的函數,this.touchEnd是我們自己寫的函數
                }

            }
        }
    },
    methods:{
        update(){//不知道怎麼寫就去swiper官網查api
            //console.log(this.$refs.swiper);//列印swiper實例

            this.$refs.swiper && this.$refs.swiper.$swiper.update();//調用swiper.update()更新滾動條
        },
        scroll(){
            const swiper=this.$refs.swiper.$swiper;

            //如果正在下拉中,不會再次執行
            if(this.pulling) return;

            console.log(swiper.translate);//列印出滾動條滾過的距離
            if(swiper.translate>0){//下拉
                if(!this.pullDown){//如果不需要下拉刷新
                    return;
                }
                if(swiper.translate>PULL_DOWN_HEIGHT){
                    this.$refs.pullDownLoading.setText(PULL_DOWN_TEXT_START);
                }else{
                    this.$refs.pullDownLoading.setText(PULL_DOWN_TEXT_INIT);
                }
            }
        },
        touchEnd(){
            const swiper=this.$refs.swiper.$swiper;

            //如果正在下拉中,不會再次執行
            if(this.pulling) return;           

            if(swiper.translate>PULL_DOWN_HEIGHT){//如果距離大於設定的距離
                if(!this.pullDown){//如果不需要下拉刷新
                    return;
                }
                this.pulling=true;

                swiper.allowTouchMove=false;//禁止觸摸
                swiper.setTransition(swiper.params.speed);//設置初始速度
                swiper.setTranslate(PULL_DOWN_HEIGHT);//移動到設定的位置(拖動過度時回到設置的位置)
                swiper.params.virtualTranslate=true;//定住不給回彈
                this.$refs.pullDownLoading.setText(PULL_DOWN_TEXT_ING);//設置正在刷新中的文字
                this.$emit("pull-down",this.pullDownEnd);//觸發消息,傳遞結束下拉的函數
            }
        },
        pullDownEnd(){
            const swiper=this.$refs.swiper.$swiper;

            this.pulling=false;

            this.$refs.pullDownLoading.setText(PULL_DOWN_TEXT_END);//設置載入結束後的文字
            swiper.allowTouchMove=true;//可以觸摸
            swiper.setTransition(swiper.params.speed);//設置初始速度           
            swiper.params.virtualTranslate=false;//可以回彈
            swiper.setTranslate(0);//移動到最初的位置
        }
    },
    watch:{//檢測數據變化的事件
        data(){
            this.update();//data數據變化時執行update函數
        }
    }
}
</script>

<style lang="scss" scoped>
    @import '~assets/scss/mixins';

    .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;
    }
     
</style>

 

修改pages/home/index.vue

<template>
    <div class="home">
        <header class="g-header-container">
            <!-- 沒有內容自閉合即可-->
            <home-header/>
        </header> 
        <!-- 滾動條接收到數據後開始更新 -->
        <!-- pullDown是布爾值,可以使用簡寫直接傳入,不加冒號 -->
        <!-- 接收到pull-down消息後,觸發pullToRefresh方法 -->
        <me-scroll :data="recommends" pullDown @pull-down="pullToRefresh">
            <home-slider />
            <home-nav />
            <!-- 接收熱門推薦載入完畢的消息 -->
            <home-recommend @loaded="getRecommends" />
        </me-scroll>
        <div class="g-backup-container"></div>
        <!-- 當前頁面存在二級頁面時需要使用router-view -->
        <router-view></router-view>
    </div>
</template>

<script>
import MeScroll from 'base/scroll';
import HomeHeader from './header';
import HomeSlider from './slider';
import HomeNav from './nav';
import HomeRecommend from './recommend';


export default {
    name:"Home",
    components:{
        HomeHeader,
        HomeSlider,
        MeScroll,
        HomeNav,
        HomeRecommend
    },
    data(){
        return{
            recommends:[]
        }
    },
    methods:{
        getRecommends(recommends){
            this.recommends=recommends;
        },
        updateScroll(){

        },
        pullToRefresh(end){
            setTimeout(()=>{
                console.log("下拉刷新");
                end();
            },1000);
        }
    }
}
</script>

<style lang="scss" scoped>
    // 引入前面需要加波浪線,否則會報錯
    @import "~assets/scss/mixins";
    .home{
        overflow:hidden;
        width:100%;
        height:100%;
        background:$bgc-theme;
    }

</style>

 

效果圖

 

更新幻燈片

真正實現通過下拉刷新,更新幻燈片

修改src/api/home.js

import axios from 'axios';
import {SUCC_CODE,TIMEOUT,HOME_RECOMMEND_PAGE_SIZE,JSONP_OPTIONS} from './config';
import jsonp from 'assets/js/jsonp';

// shuffle打亂數組順序的方法
const shuffle=(arr)=>{
    const arrLength=arr.length;
    let i=arrLength;
    let rndNum;

    while(i--){
        //如果當前索引不等於隨機數索引,則交換這兩個索引的位置
        if(i!==(rndNum=Math.floor(Math.random()*arrLength))){
            //這是一種新的交換寫法 ES6解構
            [arr[i],arr[rndNum]]=[arr[rndNum],arr[i]];
        }
    }
    return arr;
}

//獲取幻燈片數據 ajax
export const getHomeSliders=()=>{

    //演示超時錯誤
    return axios.get('http://www.imooc.com/api/home/slider',{
        timeout:TIMEOUT
    }).then(res=>{
        //console.log(res);
        if(res.data.code===SUCC_CODE){

            //這段代碼的作用主要是演示下拉刷新的效果
            //每次刷新會載入出不同數量,不同順序的輪播圖
            let sliders=res.data.slider;
            const slider=[sliders[Math.floor(Math.random()*sliders.length)]];//slider是從sliders中隨機取出一張圖片,並包裝成數組
            sliders=shuffle(sliders.filter(()=>Math.random()>=0.5));//50%的概率,真就返回,假就剔除
            if(sliders.length===0){
                sliders=slider;//如果不幸一張都沒有,就把之前隨機的那張賦值給sliders
            }
            return sliders;

            //return res.data.slider;
        }

        throw new Error('沒有成功獲取到數據');
    }).catch(err=>{
        console.log(err);
        //錯誤處理
        return [{       
            linkUrl:'www.baidu.com',
            picUrl:require('assets/img/404.png')
        }]
    }).then(data=>{//獲取輪播圖數據後,延遲一秒再顯示
        return new Promise(resolve=>{
            setTimeout(()=>{
                resolve(data);
            },1000);
        })
    });
}

//獲取熱門推薦數據
export const getHomeRecommend=(page=1,psize=HOME_RECOMMEND_PAGE_SIZE)=>{
    const url='https://ju.taobao.com/json/tg/ajaxGetItemsV2.json';
    const params={
        page,
        psize,
        type:0,
        frontCatId:''//type和frontCatId是根據給定的淘寶介面來添加的
    }

    //調用jsonp獲取數據
    return jsonp(url,params,JSONP_OPTIONS).then(res=>{
        if(res.code==='200'){
            return res;
        }

        throw new Error('沒有成功獲取到數據');
    }).catch(err=>{
        if(err){
            console.log(err);
        }
        
    }).then(res=>{
        //延遲一秒返回數據
        return new Promise(resolve=>{
            setTimeout(()=>{
                resolve(res);
            },1000);
        })
    })
    
}

pages/home/slider.vue

<template>
    <div class="slider-wrapper">
        <!-- sliders沒載入時顯示loading -->
        <Meloading v-if="!sliders.length"></Meloading>
        <!-- 分開傳才能分開校驗,因此不直接傳入對象 -->
        <MeSlider 
            :data="sliders"
            :direction="direction"
            :loop="loop"
            :interval="interval"
            :pagination="pagination"
            v-else
        >
            <swiper-slide v-for="(item,index) in sliders" :key="index">
                <a :href="item.linkUrl" class="slider-link">
                    <img :src="item.picUrl" class="slider-img">
                </a>
            </swiper-slide>
        </MeSlider>
    </div>
</template>

<script>
import MeSlider from 'base/slider';
import { SwiperSlide } from 'vue-awesome-swiper';
import { sliderOptions } from './config';
import { getHomeSliders } from 'api/home';
import Meloading from 'base/loading';

export default {
   name:"HomeSlider",
   components:{
       MeSlider,
       SwiperSlide,
       Meloading
   },
    data(){
        return{
            direction:sliderOptions.direction,
            loop:sliderOptions.loop,
            interval:sliderOptions.interval,
            pagination:sliderOptions.pagination,
            sliders:[],//這是從伺服器讀取
        }
    },
    created(){
        //一般在created里獲取遠程數據
        this.getSliders();      
    },
    methods:{
        //api
        update(){
            return this.getSliders();
        },
        getSliders(){
            return getHomeSliders().then(data=>{
                //console.log(data);
                this.sliders=data;
            });
        }
    }
}
</script>

<style lang="scss" scoped>
    // 引入前面需要加波浪線,否則會報錯
    @import "~assets/scss/mixins";
    .slider-wrapper{
        width:100%;
        height:183px;
    }
    .slider-link{
        display:block;
    }
    .slider-link,
    .slider-img{
        width:100%;
        height:100%;
    }
    
</style>

pages/home/index.vue

<template>
    <div class="home">
        <header class="g-header-container">
            <!-- 沒有內容自閉合即可-->
            <home-header/>
        </header> 
        <!-- 滾動條接收到數據後開始更新 -->
        <!-- pullDown是布爾值,可以使用簡寫直接傳入,不加冒號 -->
        <!-- 接收到pull-down消息後,觸發pullToRefresh方法 -->
        <me-scroll :data="recommends" pullDown @pull-down="pullToRefresh">
            <home-slider ref="slider" />
            <home-nav />
            <!-- 接收熱門推薦載入完畢的消息 -->
            <home-recommend @loaded="getRecommends" />
        </me-scroll>
        <div class="g-backup-container"></div>
        <!-- 當前頁面存在二級頁面時需要使用router-view -->
        <router-view></router-view>
    </div>
</template>

<script>
import MeScroll from 'base/scroll';
import HomeHeader from './header';
import HomeSlider from './slider';
import HomeNav from './nav';
import HomeRecommend from './recommend';


export default {
    name:"Home",
    components:{
        HomeHeader,
        HomeSlider,
        MeScroll,
        HomeNav,
        HomeRecommend
    },
    data(){
        return{
            recommends:[]
        }
    },
    methods:{
        getRecommends(recommends){
            this.recommends=recommends;
        },
        updateScroll(){

        },
        pullToRefresh(end){
            this.$refs.slider.update().then(end);
        }
    }
}
</script>

<style lang="scss" scoped>
    // 引入前面需要加波浪線,否則會報錯
    @import "~assets/scss/mixins";
    .home{
        overflow:hidden;
        width:100%;
        height:100%;
        background:$bgc-theme;
    }

</style>

base/slider/index.vue

<template>
    <div class="mine-slider">
        <!-- 動態的屬性前面加冒號 -->
        <swiper :options="swiperOption" class="swiper-container" :key="keyId">
            <slot></slot>
            <div class="swiper-pagination" v-if="pagination" slot="pagination"></div>
        </swiper>
    </div>
</template>

<script>
import { Swiper } from 'vue-awesome-swiper';

export default {
    name:"MeSlider",
    components: {
        Swiper
    },
    props:{
        direction:{
            type:String,
            default:'horizontal',
            validator(value){
                // 返回true則驗證通過
                return [
                    'horizontal',
                    'vertical'
                ].indexOf(value)>-1;
            }
        },
        interval:{//自動輪播
            type:Number,
            default:3000,
            validator(value){
                return value>=0;
            }
        },
        loop:{//無縫滾動
            type:Boolean,
            default:true
        },
        pagination:{//分液器
            type:Boolean,
            default:true
        },
        data:{
            type:Array,
            default(){
                return [];
            }
        }
    },
    data(){
        return{
            keyId:Math.random(),
        }
    },
    watch:{
        data(newData){
            if(newData.length===0) return;
            this.swiperOption.loop=newData.length<=1?false:this.loop;//每次刷新後重新判斷是否需要滾動
            this.keyId=Math.random();
        }
    },
    created(){
        this.init();
    },
    methods:{
        init(){
            this.swiperOption={
                watchOverflow:true,//只有一張圖片時不設置滾動效果
                direction:this.direction,//滾動方向
                autoplay:this.interval?{
                    delay:this.interval,
                    disableOnInteraction:false//手指滑動時是否停止自動輪播
                }:false,
                slidesPerView:1,//同時顯示幾張圖片
                loop:this.data.length<=1?false:this.loop,//是否開啟無縫滾動,1張圖片不需要滾動
                pagination:{//分頁器
                    el:this.pagination?'.swiper-pagination':null
                }

            }
        }
    }
}
</script>

<style lang="scss" scoped>
    @import '~assets/scss/mixins';
    .swiper-container{
        width:100%;
        height:100%;
    }
</style>

效果圖


您的分享是我們最大的動力!

更多相關文章
  • 統計一個表的數據量是經常遇到的需求,但是不同的表設計及不同的寫法,統計性能差別會有較大的差異,下麵就簡單通過實驗進行測試(大家測試的時候註意緩存的情況,否則影響測試結果)。 1、 準備工作 為了後續測試工作的進行,先準備幾張用於測試的表及數據,為了使測試數據具有參考意義,建議測試表的數據量大一點,以 ...
  • 簡介 Flutter Fly是什麼?Flutter Fly是一款開源的Flutter 項目,非常適合初學者進行學習。App內集成了160+Flutter基礎控制項的詳細介紹及用法,內容來源於: "http://laomengit.com/" 。 歡迎頁: 首頁、控制項頁面、詳情頁及搜索頁面: 我: Ap ...
  • 質數是指在大於1的自然數中,除了1和它自身外沒有其他因數的自然數。 一、標記法,flag初始值為true,當n%i 0時(1<i<n),說明n不是質數,此時flag值為false且迴圈終止;當n%i != 0 時,flag的值始終為true,此時會輸出n是質數。 <!DOCTYPE html> <h ...
  • 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <tit ...
  • Vue.js作為目前最熱門最具前景的前端框架之一,其提供了一種幫助我們快速構建並開發前端項目的新的思維模式。本文旨在幫助大家認識Vue.js,並詳細介紹使用vue-cli腳手架工具快速的創建Vue項目,以及對項目目錄結構的解釋說明,使大家清晰的瞭解Vue項目的開發流程。 ...
  • 作者 | Function | 前端時空 Vue 和 React 中的 key 到底有什麼用? key 是給每一個 vnode 的唯一 id,依靠 key,我們的 diff 操作可以更準確、更快速。 對於簡單列表頁渲染來說 diff 節點也更快,但會產生一些隱藏的副作用,比如可能不會產生過渡效果,或 ...
  • 一、多重背景圖片 1.background:url() 重覆類型 位置信息,url() 重覆類型 位置信息; 中間使用英文逗號隔開 2.第二種方法就是分開寫 background-image:url(),url(); background-repeat:重覆類型,重覆類型; background-p ...
  • 接上篇 https://www.cnblogs.com/chenyingying0/p/12635080.html 上拉載入更多 base/scroll/index.vue <template> <!-- wiper會實例化構造函數,生成swiper實例 --> <!-- ref="swiper"能 ...
一周排行
  • 比如要拆分“呵呵呵90909086676喝喝999”,下麵當type=0返回的是中文字元串“呵呵呵,喝喝”,type=1返回的是數字字元串“90909086676,999”, private string GetStrings(string str,int type=0) { IList<strin ...
  • Swagger一個優秀的Api介面文檔生成工具。Swagger可以可以動態生成Api介面文檔,有效的降低前後端人員關於Api介面的溝通成本,促進項目高效開發。 1、使用NuGet安裝最新的包:Swashbuckle.AspNetCore。 2、編輯項目文件(NetCoreTemplate.Web.c ...
  • 2020 年 7 月 30 日, 由.NET基金會和微軟 將舉辦一個線上和為期一天的活動,包括 微軟 .NET 團隊的演講者以及社區的演講者。本次線上大會 專註.NET框架構建微服務,演講者分享構建和部署雲原生應用程式的最佳實踐、模式、提示和技巧。有關更多信息和隨時瞭解情況:https://focu... ...
  • #abp框架Excel導出——基於vue #1.技術棧 ##1.1 前端採用vue,官方提供 UI套件用的是iview ##1.2 後臺是abp——aspnetboilerplate 即abp v1,https://github.com/aspnetboilerplate/aspnetboilerp ...
  • 前言 本文的文字及圖片來源於網路,僅供學習、交流使用,不具有任何商業用途,版權歸原作者所有,如有問題請及時聯繫我們以作處理。 作者:碧茂大數據 PS:如有需要Python學習資料的小伙伴可以加下方的群去找免費管理員領取 input()輸入 Python提供了 input() 內置函數從標準輸入讀入一 ...
  • 從12年到20年,python以肉眼可見的趨勢超過了java,成為了當今It界人人皆知的編程語言。 python為什麼這麼火? 網路編程語言搜索指數 適合初學者 Python具有語法簡單、語句清晰的特點,這就讓初學者在學習階段可以把精力集中在編程對象和思維方法上。 大佬都在用 Google,YouT ...
  • 在社會上存在一種普遍的對培訓機構的學生一種歧視的現象,具體表現在,比如:當你去公司面試的時候,一旦你說了你是培訓機構出來的,那麼基本上你就涼了,那麼你瞞著不說,然後又通過了面試成功入職,但是以後一旦在公司被髮現有培訓經歷,可能會面臨被降薪,甚至被辭退,培訓機構出來的學生,在用人單位眼裡就是能力低下的 ...
  • from typing import List# 這道題看了大佬寫的代碼,經過自己的理解寫出來了。# 從最外圍的四周找有沒有為O的,如果有的話就進入深搜函數,然後深搜遍歷# 判斷上下左右的位置是否為Oclass Solution: def solve(self, board: List[List[s ...
  • import requests; import re; import os; # 1.請求網頁 header = { "user-agent":'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, li ...
  • import requests; import re; import os; import parsel; 1.請求網頁 header = { "user-agent":'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537. ...