1.創(chuàng)建文件夾

創(chuàng)建文件夾PhotoTest。

并在當前文件夾下創(chuàng)建img包用來存儲圖片。

把vue.js文件復制到PhotoTest文件夾下。

文件目錄如下。

2.圖片切片

隨便找一張圖片在（ps）中打開。

右鍵選擇切片工具。?

?.左鍵拉一個框選中整張圖片，再點擊右鍵選擇劃分切片.

?勾上水平和垂直劃分，并且內(nèi)容都改為10。

?選擇jpeg格式，點擊左下角儲存，選擇儲存位置。

?儲存在我們已經(jīng)建好的img包里，這樣我們就得到了這張圖片的100張圖片了。

?3.頁面布局

打開HBuilderX創(chuàng)建一個html文件并寫好整體結(jié)構(gòu)。

?寫好主題盒子樣式。

?寫一個自定義組件，并且在template下寫好我們要重復使用的模板。

?因為我們要把100張切片圖片都放進去所以使用v-for循環(huán)遍歷我們的圖片更方便，：obj（v-bind:obj）這個是我們用props設(shè)置的自定義屬性，其目的是讓我們img標簽中的 :src 中的值變?yōu)橐粋€動態(tài)的對像。

?在data中寫一個imgs數(shù)組用來存放我們100張圖片的地址。

?4.快捷地做出100張圖片地址的文本。

你在把圖片存到img中后除了第一張圖片是JPEG格式其他的都是gif格式，先把第一張圖片的格式改為gif格式

現(xiàn)在data中寫上第一張的地址。

?復制第一個并且打開Excel，隨便粘貼一個位置，左鍵點住單元格右下角向下拉出100個。

?點擊選擇性粘貼中的轉(zhuǎn)至。

?把粘貼內(nèi)容復制到新建的文本文檔里，然后替換中間內(nèi)容。

?運行效果

?

?

總結(jié)

以上是生活随笔為你收集整理的用Vue制作一个图片翻面效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。