uniapp vue與nvue輪播圖之輪播圖元件的示例程式碼
阿新 • • 發佈:2021-12-30
部分如下:
<template>
<view class="">
<!-- 輪播圖元件 -->
<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" circular="">
<blochttp://www.cppcns.comk v-for="(item,index) in swipers" :key="index">
<swiper-item>
<view class="swiper-item" @tap="event(index)">
<image :src="item.src"
lazy-load
style="height: 350upx;"></image>
</view>
</swiper-item>
</block>
</swiper>
</view>
</template>
nvue部分如下:
<template> <div> <!-- 輪播圖元件 --> <slider :auto-play="true" :interval="3000" class="slider"> <div style="position: relatice;" v-for="(item,index) in swipers" :key="index" @click="event(index)"> <image class="image" resize="cover" :src="item.src"></image> </div> <indicator class="indicator"></indicator> </slider> </div> </template>
nvue部分的樣式如下:
<style> .slider,.image{ width: 750px; height: 350px; } .indicator{ position: absolute; right: 0; bottom: 0; width: 150px; height: 30px; background-color: rgba(0,0); item-color:rgba(255,255,0.5); item-selected-color: #FFFFFF; } </style>
部分如下:
vue與nvue的js寫法是一樣的
<script>
export default {
data() {
return {
swipers:[{src:"/static/images/demo/demo4.png"},{src:"/static/images/demo/demo4.png"},{src:"/static/images/demo/demo4.png"}]
}
},metITwgDhods: {
event(index){
console.log("點選了 index:"+index)
}
}
}
</script>
效果圖如下:
vue:
nvue:
到此這篇關於uniapp vue與nvue輪播圖 輪播圖元件的文章就介紹到這了,更多相關uniapp輪播圖元件內容請搜尋我們以前的文章客棧或繼續瀏覽下面的相關文章希望大家以後多多支援我們!