在base/slider文件夾下創(chuàng)建slider.vue文件并在recommend.vue文件中引入
slider.vue中的具體代碼如下:
引入better-scroll實(shí)現(xiàn)輪播外冀,首先npm install better-scroll --save,安裝后在slider.vue中引入
在mounted生命周期函數(shù)中渲染better-scroll
在common/js/dom中添加以下內(nèi)容,為引入的文件的dom添加樣式掀泳,因?yàn)檫@部分內(nèi)容比較通用雪隧,可能項(xiàng)目中的其它地方也會(huì)用到,所以把它抽離出來(lái)
在slider.vue中引入
因?yàn)槭菣M向滾動(dòng)所以要首先計(jì)算并設(shè)置橫向滾動(dòng)距離
應(yīng)用better-scroll初始化輪播的代碼如下
輪播圖下面的小圓點(diǎn)的實(shí)現(xiàn)
利用better-scroll提供的方法將當(dāng)前的pageIndex 賦值給currentPageIndex
實(shí)現(xiàn)自動(dòng)輪播
解決切換不同設(shè)備時(shí)寬度不能自適應(yīng)的問(wèn)題
解決頁(yè)面切換時(shí)开伏,沒(méi)必要的dom重新渲染問(wèn)題(在app.vue中用keep-alive標(biāo)簽包裹router-view標(biāo)簽