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

The process of installing SVN on Ubuntu 16.04.5LTS

This article briefly introduces the process of se...

Django+vue registration and login sample code

register The front-end uses axios in vue to pass ...

Solution to multiple 302 responses in nginx proxy (nginx Follow 302)

Proxying multiple 302s with proxy_intercept_error...

Example of nginx ip blacklist dynamic ban

When a website is maliciously requested, blacklis...

Basic learning and experience sharing of MySQL transactions

A transaction is a logical group of operations. E...

Detailed explanation of the usage of MySQL data type DECIMAL

MySQL DECIMAL data type is used to store exact nu...

Detailed explanation of the process of modifying Nginx files in centos7 docker

1. Install nginx in docker: It is very simple to ...

An article to help you learn CSS3 picture borders

Using the CSS3 border-image property, you can set...

JavaScript to achieve digital clock effects

This article example shares the specific code for...

Web Design Help: Web Font Size Data Reference

<br />The content is reproduced from the Int...

Summary of common knowledge points required for MySQL

Table of contents Primary key constraint Unique p...