uniapp vue与nvue轮播图之轮播图组件的示例代码

极客

　　这篇文章主要介绍了uniapp vue与nvue轮播图轮播图组件的实例代码，代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
　　vue部分如下：

2. ‹template>
3. ‹view class="">
4. ‹!-- 轮播图组件 -->
5. ‹swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" circular="">
6. ‹block v-for="(item,index) in swipers" :key="index">
7. ‹swiper-item>
8. ‹view class="swiper-item" @tap="event(index)">
9. ‹image :src="item.src"
10. lazy-load
11. >‹/image>
12. ‹/view>
13. ‹/swiper-item>
14. ‹/block>
15. ‹/swiper>
16. ‹/view>
17. ‹/template>

复制代码

　　nvue部分如下：

2. ‹template>
3. ‹div>
4. ‹!-- 轮播图组件 -->
5. ‹slider :auto-play="true" :interval="3000" class="slider">
6. ‹div v-for="(item,index) in swipers" :key="index" @click="event(index)">
7. ‹image class="image" resize="cover" :src="item.src">‹/image>
8. ‹/div>
9. ‹indicator class="indicator">‹/indicator>
10. ‹/slider>
11. ‹/div>
12. ‹/template>

复制代码

　　nvue部分的css样式如下：

2. ‹style>
3. .slider,.image{
4. width: 750px;
5. height: 350px;
6. }
7. .indicator{
8. position: absolute;
9. right: 0;
10. bottom: 0;
11. width: 150px;
12. height: 30px;
13. background-color: rgba(0,0,0,0);
14. item-color:rgba(255,255,255,0.5);
15. item-selected-color: #FFFFFF;
16. }
17. ‹/style>

复制代码

　　js部分如下：

2. vue与nvue的js写法是一样的

复制代码

2. ‹script>
3. export default {
4. data() {
5. return {
6. swipers:[{src:"/static/images/demo/demo4.png"},
7. {src:"/static/images/demo/demo4.png"},
8. {src:"/static/images/demo/demo4.png"},
9. {src:"/static/images/demo/demo4.png"}]
10. }
11. },
12. methods: {
13. event(index){
14. console.log("点击了 index:"+index)
15. }
16. }
17. }
18. ‹/script>

复制代码

　　效果图如下：
　　vue:

　　nvue:

　　到此这篇关于uniapp vue与nvue轮播图 轮播图组件的文章就介绍到这了,更多相关uniapp轮播图组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

---