<el-scrollbar class="homeScroll"?ref="homescrollbar" id="resolveScroll">
? <div ?@click="backTop" ?v-show="visible">
? ? <reTop></reTop> //返回頂部單獨封裝成了一個組件，里面就存儲個圖片，方便以后替換
? </div>

//利用了無限滾動條來實現(xiàn)下拉刷新
?<div id="infscroll"
? ? ? v-infinite-scroll="load"
? ? ? infinite-scroll-disabled="disabled"
? ? ? infinite-scroll-distance="3">
? ?<tabControl :titles="['流行','新款','精選']" class="tabControl"
? ? ? ? ? ? ? ?@clickControl="clickControlMain"
? ?></tabControl>
? ?<goodsList :goodsList="goods[currentGoodsType].list"></goodsList>
? <p v-if="loading">加載中...</p>
? ?<p v-if="noMore">沒有更多了</p>
?</div>
</el-scrollbar>

data(){
return{
? banners:[],
? recommends:[],
? goods:{
? ? 'pop':{page:0,list:[]},
? ? 'new':{page:0,list:[]},
? ? 'sell':{page:0,list:[]}
? },
? currentGoodsType:'pop',
? visible:false,
? loading:false
}
}

computed:{
?noMore () {
? ?return this.goods[this.currentGoodsType].page>=20
?},
?disabled () {
? ?return this.loading
?}
}

返回頂部相關(guān)：

mounted(){
?this.handleScroll();
}

methods：{

backTop(){
?this.$refs.homescrollbar.wrap.scrollTop=0//點擊之后觸發(fā)的事件，讓其返回頂部
}，

handleScroll(){
?let that=this
?let scrollbarEl=this.$refs.homescrollbar.wrap//通過ref屬性獲取掛載元素
?scrollbarEl.onscroll=()=>{
? ?if (scrollbarEl.scrollTop>1000){

? ? //通過滾動條距離頂部距離來決定，返回頂部什么時候出現(xiàn)
? ? ?that.visible=true
? ?}else{
? ? ?that.visible=false
? ?}
?}
}

}

實現(xiàn)網(wǎng)絡(luò)請求相關(guān)：

①先對基本請求進行封裝，這里采用的是ajax家族里的axios來實現(xiàn)異步請求

import axios from 'axios'
export ?function request(config){
?const instance=axios.create({
? ?baseURL:'http://152.136.185.210:7878/api/m5',
? ?timeout:5000
?})
?instance.interceptors.request.use(config=>{
? //攔截請求
? ?return config;
?},err=>{

?})
?instance.interceptors.response.use(config=>{

? ?//攔截響應(yīng)
? ?return config
?},err=>{

?})
?return instance(config)
}

//request(config)為一個Promise對象

②對需求進行整合函數(shù)，二次封裝

import {request} from './request'
export function getHomeData(){
?return request({
? ?url:'/home/multidata'
?})
}
export function getHomeGoods(type,page){
?return request({
? ?url:'/home/data',
? ?params:{ //負(fù)責(zé)傳參，理解為接收參數(shù)
? ? ?type,
? ? ?page
? ?}
?})
}

③請求指定數(shù)據(jù)

methods:{
?getHomeData(){
? ?getHomeData().then(res=>{
? ? ?this.banners=res.data.data.banner.list
? ? ?this.recommends=res.data.data.recommend.list
? ?})
?},
?getHomeGoods(type){//這是方法
? ?const page=this.goods[type].page+1;
? ?getHomeGoods(type,page).then(res=>{//這才是網(wǎng)絡(luò)請求
? ? ?this.goods[type].list.push(...res.data.data.list)
? ? this.goods[type].page+=1
? ?})
?}

}

④執(zhí)行網(wǎng)絡(luò)請求

created(){//此時還沒掛載元素！?。?/span>
this.getHomeData();
this.getHomeGoods('pop');
this.getHomeGoods('new');
this.getHomeGoods('sell');
}

實現(xiàn)下拉加載相關(guān)：

load () {
?this.loading = true
?setTimeout(() => {
? ?this.getHomeGoods(this.currentGoodsType)//下拉到指定內(nèi)容，執(zhí)行的操作
? ?this.loading = false
?}, 2000)
}

需要注意的是滾動條里的wrapper需要指定height

不管怎么樣，我們首先要做的就是去掉過大的高度

通過css設(shè)定父元素盒子的匹配高度

height:100vh //vh是視圖窗口高度，它與我們的設(shè)備匹配

最后是滾動條的

.homeScroll{
?height: calc(100% - 50px);//用到了計算屬性，規(guī)定了滾動條的范圍
?overflow: hidden;//這個不可以省略
}

下一篇為Vue結(jié)合better-scroll實現(xiàn)滾動條，返回頂部和下拉加載