小编给大家分享一下如何使用uniapp Vue与nvue实现轮播图,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!vue部分如下:<template
小编给大家分享一下如何使用uniapp Vue与nvue实现轮播图,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
vue部分如下:
<template><view class=""><!-- 轮播图组件 --><swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" circular=""><block v-for="(item,index) in swipers" :key="index"><swiper-item><view class="swiper-item" @tap="event(index)"><image :src="item.src" lazy-load ></image></view></swiper-item></block></swiper></view></template>
nvue部分如下:
<template><div><!-- 轮播图组件 --><slider :auto-play="true" :interval="3000" class="slider"><div 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部分的CSS样式如下:
<style>.slider,.image{width: 750px;height: 350px;}.indicator{position: absolute;right: 0;bottom: 0;width: 150px;height: 30px;background-color: rgba(0,0,0,0);item-color:rgba(255,255,255,0.5);item-selected-color: #FFFFFF;}</style>
js部分如下:
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"},{src:"/static/images/demo/demo4.png"}]}},methods: {event(index){console.log("点击了 index:"+index)}}}</script>
效果图如下:
vue:
nvue:
以上是“如何使用uniapp vue与nvue实现轮播图”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网精选频道!
--结束END--
本文标题: 如何使用uniapp vue与nvue实现轮播图
本文链接: https://www.lsjlt.com/news/303089.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-05-21
2024-05-21
2024-05-21
2024-05-21
2024-05-21
2024-05-21
2024-05-21
2024-05-21
2024-05-21
2024-05-21
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0