国产成人精品亚洲777人妖,欧美日韩精品一区视频,最新亚洲国产,国产乱码精品一区二区亚洲

您的位置:首頁(yè)技術(shù)文章
文章詳情頁(yè)

Vue + ts實(shí)現(xiàn)輪播插件的示例

瀏覽:2日期:2022-11-02 13:18:04

背景

最近在學(xué)習(xí) ts,打算用 ts 寫(xiě)一個(gè)練手項(xiàng)目,參照的網(wǎng)站內(nèi)容是 wanandroid,這個(gè)接觸過(guò)android開(kāi)發(fā)的同學(xué)可能更i了解一些,其實(shí)一開(kāi)始是打算后臺(tái)全部都自己寫(xiě)的,不過(guò)奈何一個(gè)懶字,所以現(xiàn)在的打算就是自己實(shí)現(xiàn)登錄注冊(cè)簡(jiǎn)單的邏輯。這些都不重要,一開(kāi)始實(shí)現(xiàn)輪播是打算在 vue 中引入輪播圖 swiper.js,后來(lái)想想還是自己寫(xiě)算了。也當(dāng)作熟悉 ts。先上效果圖(這里沒(méi)有動(dòng)態(tài)圖片,各位同學(xué)可以自己實(shí)現(xiàn))

代碼已經(jīng)上傳 git,進(jìn)度比較慢,如果可以各位大佬點(diǎn)個(gè) star。 github.com/jiwenjie/vu…

Vue + ts實(shí)現(xiàn)輪播插件的示例

<!-- vue 實(shí)現(xiàn)輪播圖 --><template> <div : @mouseover='suspend' @mouseout='autoPlay' @blur='suspend' @focus='autoPlay'> <!-- 淡入淡出效果 --> <transition-group tag='ul' :name='animation'> <li v-for='(item, index) in bannerList' :key='item.id' v-show='curIndex === index'> <img :src='http://www.intensediesel.com/bcjs/item[nameField]'> </li> </transition-group> <!-- 操作按鈕部分(底部導(dǎo)航器) --> <ul v-if='showPagination'> <li : v-for='(item, index) in bannerList' :key='item.id' @click='jump(item, index)'></li> </ul> <!-- 左側(cè)右側(cè)切換按鈕 --> <template v-if='showBtn'> <div class='common-btn-space pre-btn-space'> <span class='common-btn-span pre-btn-span'></span> </div> <div class='common-btn-space next-btn-space'> <span class='common-btn-span next-btn-span'></span> </div> </template> </div></template><!-- ts 文件拆分 --><script lang='ts'> // 兩種動(dòng)畫(huà)背景 import { Component, Prop, Vue } from ’vue-property-decorator’ import swiper from ’./ts/swiper’ @Component({ name: ’Swiper’, mixins: [swiper], }) export default class extends Vue {}</script><!-- 樣式文件拆分 --><style lang='scss' scoped> @import url('./css/swiper.scss');</style>

ts文件

import { Component, Prop, Vue} from ’vue-property-decorator’import { Banner } from ’@/beans/index’ // 首頁(yè)banner圖@Component({ name: ’Swiper’, components: {},})export default class IndexPage extends Vue { @Prop({ default: 6000 }) private timeout: number; // 默認(rèn)的切換banner圖的時(shí)長(zhǎng) @Prop({ default: 400 }) private height: number | string; // banner區(qū)域高度 @Prop({ default: () => [] }) private bannerList: Banner[]; // 傳入的圖片數(shù)組 @Prop({ default: ’imagePath’ }) private nameField: string; // 圖片地址對(duì)應(yīng)的字段名 @Prop({ default: true }) private showPagination: boolean; // 是否顯示底部原點(diǎn)分頁(yè)器 @Prop({ default: false }) private showBtn: boolean; // 是否顯示左右的切換按鈕 @Prop({ default: ’fade’, validator: function (value) { let arr = [’fade’, ’translate’] return arr.includes(value); } }) private animation: string; // 是否顯示左右的切換按鈕 private timer: any; private curIndex: number = 0; created(): void { this.autoPlay() } // lifecycle hook mounted(): void { } // method private handleSelect() { } // 自動(dòng)播放圖片 private autoPlay() { clearInterval(this.timer)//還是一樣,開(kāi)啟定時(shí)器之前需要先清除一下,防止bug this.timer = setInterval(this.nextClick, this.timeout as number) } // 切換下一個(gè) banner 圖片 private nextClick() { this.curIndex++; if (this.curIndex >= this.bannerList.length) { this.curIndex = 0; } } // 切換上一個(gè)圖片 private preClick() { this.curIndex++; if (this.curIndex >= this.bannerList.length) { this.curIndex = 0; } } // 暫停的方法 private suspend() { clearInterval(this.timer) } // 點(diǎn)擊底部原點(diǎn)按鈕調(diào)整方法 private jump(bannerItem: Banner, index: number) { this.curIndex = index; } // private animationMethodValidator(): string { // }}

css文件

#swiperDIV { position: relative; display: block; width: 100%;}.img-list { width: 100%; height: 100%; position: relative; margin: 0; padding: 0; z-index: 9;}.img-list li { position: absolute; left: 0; width: 100%; height: 100%;}.img-list img { width: 100%; height: 100%;}.option-list { position: absolute; left: 0; right: 0; bottom: 10px; height: 30px; line-height: 30px; z-index: 99; text-align: center;}.option-list-item { display: inline-block; background-color: rgba(255, 255, 255, .4); width: 10px; height: 10px; border-radius: 50%; margin: 0 3px; cursor: pointer;}.cur-option-style { background-color: #fff;}.common-btn-space { position: absolute; top: 0; bottom: 0; z-index: 99; width: 22px;}.pre-btn-space { left: 20px;}.next-btn-space { right: 20px;}.common-btn-span { display: inline-block; width: 22px; height: 22px; background-color: transparent; cursor: pointer; position: absolute; top: 0; bottom: 0; margin: auto; border-top: 2px solid transparent; border-right: 2px solid transparent; border-bottom: 2px solid red; border-left: 2px solid red;}.pre-btn-span { transform: rotate(45deg);}.next-btn-span { transform: rotate(-135deg);}/* 實(shí)現(xiàn)動(dòng)畫(huà)的兩組類(淡入淡出) */.fade-enter-active,.fade-leave-active { transition: opacity .6s;}.fade-enter,.fade-leave-to { opacity: 0;}/* (滾動(dòng)) */.translate-enter { transform: translateX(100%)}.translate-enter-to { transition: all .6s ease; transform: translateX(0);}.translate-leave { transform: translateX(0)}.translate-leave-active { transition: all .6s ease; transform: translateX(-100%)}

很多地方做了配置,包括底部的分頁(yè)器,左右兩側(cè)的按鈕。動(dòng)畫(huà)目前只實(shí)現(xiàn)了兩種,一種是淡入淡出,一種是平滑滾動(dòng)。

這里我把整個(gè) vue 文件做了拆分。有多種原因,一個(gè)是我司做項(xiàng)目時(shí)整體就是這種拆分,不過(guò)我司用的就是正常的 vue 和 js。主要原因就是考慮到頁(yè)面復(fù)雜和邏輯交互很多的時(shí)候,一個(gè) vue 文件可能超過(guò)萬(wàn)行,所以做了拆分,這里我也延續(xù)了這種寫(xiě)法,基本思想其實(shí)就是使用 mixins 引入 ts。還有一個(gè)原因是 ts 在 vue 文件中會(huì)有很多莫名其妙的報(bào)錯(cuò),明明代碼沒(méi)問(wèn)題,但就是有錯(cuò)誤警告。如果提到 ts 文件中就正常,這也是我拆分的一個(gè)原因。

其他的功能可以自己在加,如果有問(wèn)題可以留言,有錯(cuò)誤希望各位大佬指正。

以上就是Vue + ts實(shí)現(xiàn)輪播插件的示例的詳細(xì)內(nèi)容,更多關(guān)于Vue + ts 輪播插件的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章!

標(biāo)簽: Vue
相關(guān)文章:
主站蜘蛛池模板: 神农架林区| 乌什县| 崇左市| 兴化市| 阜南县| 漯河市| 永春县| 大兴区| 长兴县| 淮北市| 河北省| 台南县| 太康县| 金堂县| 凉城县| 隆安县| 津南区| 安西县| 九江市| 郧西县| 北碚区| 宝鸡市| 阿合奇县| 泰和县| 德州市| 丰县| 彩票| 龙州县| 无为县| 沙湾县| 乌兰县| 蒙山县| 治县。| 清涧县| 潜山县| 新郑市| 尤溪县| 大悟县| 新津县| 邹城市| 香河县|