輪播模仿臭美APP,vue,swiper

2022-03-31 00:13:39 字數 658 閱讀 3276

介紹:輪播使用了swiper,重要用於移動端滑動,詳情可檢視官網

1.首先用npm安裝        npm install swiper

2.main.js 中引入css     import 'swiper/css/swiper.css'

3.新建swiper-slide.min.css檔案 

@charset "utf-8";*htmlbody{height:100%;

background-size:100% 100%

.swiper-pagination-bullet-active i{

-webkit-transform:scale(1.5);

4.新建.vue檔案,(根據自己喜歡選擇不同效果)

v-for="(item, index) in tabdatalist"

:key="index">

class="main-img"/>

5.實現效果是這樣的

第一張圖

第二張圖

模仿tmall主頁效果 做的乙個輪播

學後台的對於前端挺菜,基礎練習階段,模擬做個天貓主頁。遇到的一些問題,舍友前端大神說我js寫的太雜,jquery和js混寫並不好 一開始寫得兩個函式乙個自動變換乙個手動變換挺不好計時器各種錯亂,換成乙個好點了了,後來也js自己用計數器弄錯了很多很多地方,而且發生了很多問題,過渡計時器加乙個anima...

Android UI 簡單模仿轉轉乙個輪播效果

簡單模仿轉轉輪播效果 沒有用自定義view,而是用自定義drawable,這樣更靈活。drawable可以作為背景設定在任何view上。用viewpager.addonpagechanglistener監聽滑動。主要邏輯在於判斷當前的item和下乙個item,先繪製當前item,然後判斷下乙個ite...

使用VUE模仿BOSS直聘APP

一 碎碎念 偶爾在群裡看到乙個小夥伴說 最近面試的人好多都說用vue做過乙個餓了麼。當時有種莫名想笑。為何不知道創新一下?於是想寫個demo演練一下。那去模仿誰呢?還是boss直聘 跟我沒關係,不是在打廣告!只是用過 吧,15年使用angular1.0 也模仿過它。於是就組織了幾個小夥伴一起開發,目...