欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue實現(xiàn)3D切換滾動效果

 更新時間:2022年04月10日 15:08:05   作者:深圳最菜的前端  
這篇文章主要為大家詳細介紹了vue實現(xiàn)偽3D切換滾動效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下

本文實例為大家分享了vue實現(xiàn)3D切換滾動效果的具體代碼,供大家參考,具體內(nèi)容如下

今天寫項目,遇到一個點擊切換的滾動需求,貼出來,做一個記錄

這個是最終的一個效果,點擊左右小箭頭,實現(xiàn)滾動效果,但是只是簡單滾動,沒有動畫之類的

實現(xiàn)思路:

  • css中,正常寫一個divdisplay:flex來平鋪圖片
  • 然后中間位置定位一個框,框大小比外面的大,中間圖片隨意取列表中的一個就行
  • js中,使用v-for循環(huán)列表
  • 點擊右側(cè)時,將循環(huán)列表中的第一個圖片刪除,然后添加到列表最后一個,點擊左側(cè)時同理,這樣,就能簡單實現(xiàn)一個無縫循環(huán)的效果了
  • 最重要的一點,因為中間時梯形,要么就是讓UI給一個框,前端設(shè)置超出隱藏屬性,達到梯形效果,要么就是自己用polygon這個css屬性調(diào)出一個多邊形出來

貼一下代碼,看看

// html
// <!-- 滾動 -->
? ? <div class="rolling">
? ? ? <div class="rolling-container">
? ? ? ? <div
? ? ? ? ? class="rolling-wraper"
? ? ? ? ? v-for="(v, i) in imgList"
? ? ? ? ? :key="i"
? ? ? ? ? @click="handleImg(v)"
? ? ? ? >
? ? ? ? ? <img
? ? ? ? ? ? :src="require(`@/assets/images/home/company/${v.img}.jpg`)"
? ? ? ? ? ? class="img"
? ? ? ? ? />
? ? ? ? </div>
? ? ? ? <!-- 左側(cè)漸變陰影 -->
? ? ? ? <div class="gradient-left"></div>
? ? ? ? <div class="rolling-shadow"></div>
? ? ? ? <!-- 右側(cè)漸變陰影 -->
? ? ? ? <div class="gradient-right"></div>
? ? ? </div>
? ? ? <!-- 中間放大層 -->
? ? ? <div class="photo-bg"></div>
? ? ? <img
? ? ? ? :src="
? ? ? ? ? require(`@/assets/images/home/company/${this.imgList[1].img}.jpg`)
? ? ? ? "
? ? ? ? class="img-large"
? ? ? />
? ? ? <img
? ? ? ? :src="require(`@/assets/images/home/company/photo-bg.png`)"
? ? ? ? class="trapezoidal"
? ? ? />
? ? ? <!-- 底部切換 -->
? ? ? <div class="top-botton">
? ? ? ? <div class="btn-left" @click="previous"></div>
? ? ? ? <div class="center-text">{{ this.imgList[1].text }}</div>
? ? ? ? <div class="btn-right" @click="next"></div>
? ?</div>
</div>
// js
data () {
?? ?return {
?? ??? ?imgList: [
?? ? ? ? ? ?{
?? ? ? ? ? ? ?img: 'activity-01',
?? ? ? ? ? ? ?text: '2020年職稱宣傳活動',
?? ? ? ? ? ?},
?? ? ? ? ? ?{
?? ? ? ? ? ? ?img: 'activity-02',
?? ? ? ? ? ? ?text: '2020年職稱宣傳活動1',
?? ? ? ? ? ?},
?? ? ? ? ? ?{
?? ? ? ? ? ? ?img: 'activity-03',
?? ? ? ? ? ? ?text: '2020年職稱宣傳活動2',
?? ? ? ? ? ?},
?? ? ? ? ?],
?? ?}
}

methdos: {
?? ?// 點擊左側(cè)
?? ?previous() {
? ? ? const direction = 'left';
? ? ? this.scrollImg(direction);
? ? },
? ? // 點擊右側(cè)
? ? next() {
? ? ? const direction = 'right';
? ? ? this.scrollImg(direction);
? ? },

? ? // 處理滾動列表圖片
? ? scrollImg(direction) {
? ? ? if (direction === 'left') {
? ? ? ? const first = this.imgList.shift();
? ? ? ? this.imgList.push(first);
? ? ? } else {
? ? ? ? const last = this.imgList.pop();
? ? ? ? this.imgList.unshift(last);
? ? ? }
? ? ? console.log();
? ? },
}
// css重點代碼
// 繪制多邊形
// 這幾個屬性為逆時針旋轉(zhuǎn)
?clip-path: polygon(4% 4%, 1% 90%, 95% 90%, 92% 4%);

具體就根據(jù)設(shè)計稿慢慢調(diào)整

以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • vue如何實現(xiàn)動態(tài)加載腳本

    vue如何實現(xiàn)動態(tài)加載腳本

    這篇文章主要介紹了vue如何實現(xiàn)動態(tài)加載腳本,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
    2020-02-02
  • vue中的vendor.js文件過大問題及解決

    vue中的vendor.js文件過大問題及解決

    這篇文章主要介紹了vue中的vendor.js文件過大問題及解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-08-08
  • vue 監(jiān)聽 Treeselect 選擇項的改變操作

    vue 監(jiān)聽 Treeselect 選擇項的改變操作

    這篇文章主要介紹了vue 監(jiān)聽 Treeselect 選擇項的改變操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-08-08
  • 詳解Axios統(tǒng)一錯誤處理與后置

    詳解Axios統(tǒng)一錯誤處理與后置

    這篇文章主要介紹了詳解Axios統(tǒng)一錯誤處理與后置,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-09-09
  • 使用Vue指令實現(xiàn)Markdown渲染和代碼高亮

    使用Vue指令實現(xiàn)Markdown渲染和代碼高亮

    在前端開發(fā)中,我們經(jīng)常需要將Markdown格式的文本渲染成HTML并展示在頁面上,同時還希望能夠?qū)Υa塊進行高亮顯示,今天我將分享一段代碼,通過Vue指令實現(xiàn)了這個功能,需要的朋友可以參考下
    2023-09-09
  • Vue數(shù)據(jù)雙向綁定底層實現(xiàn)原理

    Vue數(shù)據(jù)雙向綁定底層實現(xiàn)原理

    這篇文章主要為大家詳細介紹了Vue數(shù)據(jù)雙向綁定底層實現(xiàn)原理,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2019-11-11
  • vue-model實現(xiàn)簡易計算器

    vue-model實現(xiàn)簡易計算器

    這篇文章主要為大家詳細介紹了vue-model實現(xiàn)簡易計算器,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-08-08
  • vue使用window.open()跳轉(zhuǎn)頁面的代碼案例

    vue使用window.open()跳轉(zhuǎn)頁面的代碼案例

    這篇文章主要介紹了vue中對window.openner的使用,vue使用window.open()跳轉(zhuǎn)頁面的代碼案例,本文通過實例代碼給大家詳細講解,需要的朋友可以參考下
    2022-11-11
  • Vuejs 組件——props數(shù)據(jù)傳遞的實例代碼

    Vuejs 組件——props數(shù)據(jù)傳遞的實例代碼

    本篇文章主要介紹了Vuejs 組件——props數(shù)據(jù)傳遞的實例代碼,具有一定的參考價值,感興趣的小伙伴們可以參考一下。
    2017-03-03
  • Vue父子組件傳值的一些坑

    Vue父子組件傳值的一些坑

    這篇文章主要介紹了Vue父子組件傳值的一些坑,幫助大家更好的理解和使用vue父子組件,感興趣的朋友可以了解下
    2020-09-09

最新評論