Sample code of uniapp vue and nvue carousel components

Sample code of uniapp vue and nvue carousel components

The vue part is as follows:

<template>
	<view class="">
		<!-- Slideshow component-->
		<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-loading
						 style="height: 350upx;"></image>
					</view>
				</swiper-item>
			</block>
		</swiper>
	</view>
</template>

The nvue part is as follows:

<template>
	<div>
		<!-- Slideshow component-->
		<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>

The CSS style of the nvue part is as follows:

<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>

The js part is as follows:

The js writing methods of vue and nvue are the same

<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("Clicked index:"+index)
			}
		}
	}
</script>

The effect diagram is as follows:

vue:

insert image description here

nvue:

insert image description here

This is the end of this article about uniapp vue and nvue carousel components. For more relevant uniapp carousel component content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • Vue3.0 handwritten carousel effect
  • How to encapsulate the carousel component in Vue3
  • vue+rem custom carousel effect

<<:  Implementation code for taking screenshots using HTML and saving them as local images

>>:  Things You Don’t Know About the CSS ::before and ::after Pseudo-Elements

Recommend

Solution to the img tag problem below IE10

Find the problem I wrote a simple demo before, bu...

In-depth understanding of CSS @font-face performance optimization

This article mainly introduces common strategies ...

Docker-compose installation db2 database operation

It is troublesome to install the db2 database dir...

Summary of the application of decorative elements in web design

<br />Preface: Before reading this tutorial,...

Example of how to achieve ceiling effect using WeChat applet

Table of contents 1. Implementation 2. Problems 3...

How to use border-image to implement text bubble border sample code

During the development activity, I encountered a ...

Implementation of Vue large file upload and breakpoint resumable upload

Table of contents 2 solutions for file upload Bas...

Analysis and Solution of ERROR:2002 Reported When MySQL Starts

Preface This article mainly introduces the analys...

Detailed explanation of viewing and setting SQL Mode in MySQL

Viewing and Setting SQL Mode in MySQL MySQL can r...

Explore the truth behind the reload process in Nginx

Today's article mainly introduces the reload ...

Detailed explanation of Nodejs array queue and forEach application

This article mainly records the problems and solu...

JS cross-domain XML--with AS URLLoader

Recently, I received a requirement for function ex...