Web Front-end
JS Tutorial
Detailed explanation of vue swiper implementation of component development
Detailed explanation of vue swiper implementation of component development
I don’t know how much you know about swiper. This article mainly introduces the relevant information about vue+swiper to achieve component development. Friends who need it can refer to it. I hope it can help everyone.
Swiper's component
<template>
<p class="swiper-container">
<p class="swiper-wrapper">
<p class="swiper-slide" v-for="item in swiper"><img :src="item.room_src" alt=""></p>
<!--<p class="swiper-slide" v-for="item in test"><img :src="item.room_src" alt=""></p>-->
</p>
</p>
</template>
<script>
import Swiper from 'swiper'
export default {
name: 'swiper',
data() {
return {
mySwiper: null,
// test: [
// "https://rpic.douyucdn.cn/acrpic/171024/288016_0921.jpg",
// "https://rpic.douyucdn.cn/acrpic/171024/748396_0924.jpg",
// "https://rpic.douyucdn.cn/acrpic/171024/453751_0922.jpg",
// "https://rpic.douyucdn.cn/acrpic/171024/79663_0920.jpg"
// ]
}
},
props: ['swiper'], //swiper的就是test这个数据传递来的
methods: {
_initSwiper() {
this.mySwiper = new Swiper('.swiper-container', {
autoplay: 5000,//可选选项，自动滑动
})
},
_updateSwiper() {
this.$nextTick(() => {
this.mySwiper.update(true); //swiper update的方法
})
},
swiperUpdate() {
if (this.mySwiper) { //节点存在
this._updateSwiper(); //更新
} else {
this._initSwiper(); //创建
}
},
},
watch: {
//通过props传来的数据 和 组件一加载节点就创建成功 二者不是同步，实时监听的swiper(传递的值)的变化
swiper() {
this.swiperUpdate();
}
},
mounted() {
this.swiperUpdate(); //页面一加载拉去数据创建节点
}
}
</script>
<style lang="scss" scoped>
.swiper-container {
width: 100%;
height: 4rem;
margin-top: 0.9rem;
.swiper-wrapper {
width: 100%;
height: 100%;
.swiper-slide {
background-size: cover;
width: 100%;
height: 4rem;
img {
width: 100%;
height: 100%;
}
}
}
}
</style>Home.vue component method called
//html
<swiper :swiper="roomList.slice(6,10)" ></swiper>
//js
import swiper from 'components/swiper/swiper'
components: {
swiper
},Problem: If you simply call _initSwiper method, you will find that the page cannot be scrolled, but the page can be modified casually, and then the saved swiper can be scrolled. This reason is that the initial swiper node was not created successfully, and the value page is penetrated, layer by layer. The value of swiper can be printed as empty, and the value can be passed in when the value is modified, so here we need to update the siwper method by judging whether the node is successful
Related recommendations:
Implementation of mobile effect CellSwiper
How to implement the WeChat applet Example of the non-swiper effect of the top normal tab
The above is the detailed content of Detailed explanation of vue swiper implementation of component development. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Four recommended AI-assisted programming tools
Apr 22, 2024 pm 05:34 PM
This AI-assisted programming tool has unearthed a large number of useful AI-assisted programming tools in this stage of rapid AI development. AI-assisted programming tools can improve development efficiency, improve code quality, and reduce bug rates. They are important assistants in the modern software development process. Today Dayao will share with you 4 AI-assisted programming tools (and all support C# language). I hope it will be helpful to everyone. https://github.com/YSGStudyHards/DotNetGuide1.GitHubCopilotGitHubCopilot is an AI coding assistant that helps you write code faster and with less effort, so you can focus more on problem solving and collaboration. Git
Detailed explanation of obtaining administrator rights in Win11
Mar 08, 2024 pm 03:06 PM
Windows operating system is one of the most popular operating systems in the world, and its new version Win11 has attracted much attention. In the Win11 system, obtaining administrator rights is an important operation. Administrator rights allow users to perform more operations and settings on the system. This article will introduce in detail how to obtain administrator permissions in Win11 system and how to effectively manage permissions. In the Win11 system, administrator rights are divided into two types: local administrator and domain administrator. A local administrator has full administrative rights to the local computer
Detailed explanation of division operation in Oracle SQL
Mar 10, 2024 am 09:51 AM
Detailed explanation of division operation in OracleSQL In OracleSQL, division operation is a common and important mathematical operation, used to calculate the result of dividing two numbers. Division is often used in database queries, so understanding the division operation and its usage in OracleSQL is one of the essential skills for database developers. This article will discuss the relevant knowledge of division operations in OracleSQL in detail and provide specific code examples for readers' reference. 1. Division operation in OracleSQL
Which AI programmer is the best? Explore the potential of Devin, Tongyi Lingma and SWE-agent
Apr 07, 2024 am 09:10 AM
On March 3, 2022, less than a month after the birth of the world's first AI programmer Devin, the NLP team of Princeton University developed an open source AI programmer SWE-agent. It leverages the GPT-4 model to automatically resolve issues in GitHub repositories. SWE-agent's performance on the SWE-bench test set is similar to Devin, taking an average of 93 seconds and solving 12.29% of the problems. By interacting with a dedicated terminal, SWE-agent can open and search file contents, use automatic syntax checking, edit specific lines, and write and execute tests. (Note: The above content is a slight adjustment of the original content, but the key information in the original text is retained and does not exceed the specified word limit.) SWE-A
Learn how to develop mobile applications using Go language
Mar 28, 2024 pm 10:00 PM
Go language development mobile application tutorial As the mobile application market continues to boom, more and more developers are beginning to explore how to use Go language to develop mobile applications. As a simple and efficient programming language, Go language has also shown strong potential in mobile application development. This article will introduce in detail how to use Go language to develop mobile applications, and attach specific code examples to help readers get started quickly and start developing their own mobile applications. 1. Preparation Before starting, we need to prepare the development environment and tools. head
Detailed explanation of the role and usage of PHP modulo operator
Mar 19, 2024 pm 04:33 PM
The modulo operator (%) in PHP is used to obtain the remainder of the division of two numbers. In this article, we will discuss the role and usage of the modulo operator in detail, and provide specific code examples to help readers better understand. 1. The role of the modulo operator In mathematics, when we divide an integer by another integer, we get a quotient and a remainder. For example, when we divide 10 by 3, the quotient is 3 and the remainder is 1. The modulo operator is used to obtain this remainder. 2. Usage of the modulo operator In PHP, use the % symbol to represent the modulus
Which Linux distribution is best for Android development?
Mar 14, 2024 pm 12:30 PM
Android development is a busy and exciting job, and choosing a suitable Linux distribution for development is particularly important. Among the many Linux distributions, which one is most suitable for Android development? This article will explore this issue from several aspects and give specific code examples. First, let’s take a look at several currently popular Linux distributions: Ubuntu, Fedora, Debian, CentOS, etc. They all have their own advantages and characteristics.
Exploring Go language front-end technology: a new vision for front-end development
Mar 28, 2024 pm 01:06 PM
As a fast and efficient programming language, Go language is widely popular in the field of back-end development. However, few people associate Go language with front-end development. In fact, using Go language for front-end development can not only improve efficiency, but also bring new horizons to developers. This article will explore the possibility of using the Go language for front-end development and provide specific code examples to help readers better understand this area. In traditional front-end development, JavaScript, HTML, and CSS are often used to build user interfaces
