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

Share CSS writing standards and order [recommended for everyone to use]

CSS writing order 1. Position attributes (positio...

Navicat for MySQL tutorial

First, you need to download and install Navicat f...

Summary of how to modify the root password in MySQL 5.7 and MySQL 8.0

MySQL 5.7 version: Method 1: Use the SET PASSWORD...

MySQL8.0.18 configuration of multiple masters and one slave

Table of contents 1. Realistic Background 2. Agre...

Introduction to the use of anchors (named anchors) in HTML web pages

The following information is compiled from the Int...

In-depth analysis of MySQL data type DECIMAL

Preface: When we need to store decimals and have ...

Detailed explanation of jQuery method attributes

Table of contents 1. Introduction to jQuery 2. jQ...

Detailed explanation of MySQL information_schema database

1. Overview The information_schema database is th...

How to generate a free certificate using openssl

1: What is openssl? What is its function? What is...

Web Design Tutorial (7): Improving Web Design Efficiency

<br />Previous article: Web Design Tutorial ...

How to limit the number of concurrent connection requests in nginx

Introduction The module that limits the number of...

Solution to high CPU usage of Tomcat process

Table of contents Case Context switching overhead...

How to use the realip module in Nginx basic learning

Preface There are two types of nginx modules, off...