uniapp小程序開發(fā)組件封裝之自定義輪播圖效果
更新時(shí)間：2023年02月06日 10:33:10 作者：不苒
這篇文章主要介紹了uniapp小程序開發(fā)組件封裝之自定義輪播圖,本文主要展示小程序端封裝輪播圖組件，使用的是uniapp進(jìn)行的開發(fā)，主要使用的是uniapp官網(wǎng)提供的swiper組件，需要的朋友可以參考下
??前言：
本文主要展示小程序端封裝輪播圖組件，使用的是uniapp進(jìn)行的開發(fā)，主要使用的是uniapp官網(wǎng)提供的
swiper組件,可以參考官方文檔，查看一些相關(guān)API。效果圖一睹為快：
話不多說直接上正文一起來學(xué)習(xí)一下封裝輪播圖組件吧！
??正文
1、首先了解swiper組件
滑塊視圖容器。
一般用于左右滑動(dòng)或上下滑動(dòng)，比如banner輪播圖。
注意滑動(dòng)切換和滾動(dòng)的區(qū)別，滑動(dòng)切換是一屏一屏的切換。
swiper下的每個(gè)swiper-item是一個(gè)滑動(dòng)切換區(qū)域，不能停留在2個(gè)滑動(dòng)區(qū)域之間。
1.1、小小的demo示例：
<template>
<view class="uni-margin-wrap">
<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="2000"
:duration="500">
<swiper-item>
<view class="swiper-item uni-bg-red">A</view>
</swiper-item>
<swiper-item>
<view class="swiper-item uni-bg-green">B</view>
</swiper-item>
<swiper-item>
<view class="swiper-item uni-bg-blue">C</view>
</swiper-item>
</swiper>
</view>
</template>
<style>
.uni-margin-wrap {
width: 690rpx;
width: 100%;
}
.swiper {
height: 300rpx;
}
.swiper-item {
display: block;
height: 300rpx;
line-height: 300rpx;
text-align: center;
}
</style>
效果圖如下：
1.2、自定義輪播圖效果展示說明
我們要做的是：
輪播圖底部顏色漸變
左下方包含對(duì)應(yīng)圖片的一行文字說明
指示點(diǎn)在右下方，選中顏色為白色，未選中為灰色
效果圖如下：
2、完成自定義輪播圖效果
我們先完成效果再去探討如何封裝成組件。如下示例代碼展示了自定義輪播圖的效果：
swiper常用屬性介紹：
indicator-dots：輪播圖正前方的小圓點(diǎn)(此案例沒有使用官方提供的，是自定義的在右下角附近)autoplay：是否自動(dòng)切換interval：圖片輪播間隔此處為3秒duration：圖片輪播動(dòng)畫時(shí)長(zhǎng) 此處為0.5秒circular：是否開啟無縫輪播（此處為到第三張圖片后無縫播放第一張圖片）
<template>
<!-- 輪播圖組件 -->
<view class="px-3 py-2 ">
<view class="position-relative">
<swiper :autoplay="true" :interval="3000" :duration="500" circular style="height: 250rpx;"
@change="changeIndicatorDots">
<swiper-item v-for="(item,index) in swipers" :key="index">
<image :src="item.src" mode="sapectFill" style="height:250rpx;width: 100%;" class="rounded-lg">
</image>
</swiper-item>
</swiper>
<view class="flex align-center text-white rounded-bottom-lg px-2 pb-1" style="position: absolute; bottom: 0; left: 0; right: 0;
background-image: linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,0.8));">
<view style="width: 80%;" class="text-ellipsis">
<!-- 獲取當(dāng)前指示點(diǎn)的位置，獲取對(duì)應(yīng)的title -->
<text>{{swipers[current].title}}</text>
</view>
<view style="width: 20%;" class="flex align-center justify-end flex-shrink">
<!-- 指示點(diǎn)選中當(dāng)前圖片為白色 未選中為灰色 -->
<view v-for="(item,index) in swipers" :key="index" style="height: 16rpx;width: 16rpx ; "
class="rounded-circle ml-1"
:style="index===current?'background-color:rgba(255,255,255,1)':'background-color:rgba(255,255,255,0.5)'">
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
current: 0, // 標(biāo)識(shí)當(dāng)前選中的圖片序列號(hào)
swipers: [{
src: '/static/swiper/1.jpg',
title: '自定義輪播圖組件圖片一'
}, {
src: '/static/swiper/2.jpg',
title: '自定義輪播圖組件圖片二名字很長(zhǎng)測(cè)試用'
}, {
src: '/static/swiper/3.jpg',
title: '自定義輪播圖組件圖片三'
}]
}
},
onLoad() {
},
methods: {
// changeIndicatorDots方法會(huì)在輪播的圖片切換后調(diào)用，e.detail.current表示當(dāng)前所在滑塊的 index
changeIndicatorDots(e) {
this.current = e.detail.current
}
}
}
</script>
示例代碼中的class類中的類名樣式是我已經(jīng)在全局配置好的，由于篇幅比較長(zhǎng)，之后的小程序文章也會(huì)經(jīng)常使用，我已經(jīng)上傳到了CSDN資源（免費(fèi)），點(diǎn)擊鏈接跳轉(zhuǎn)下載可查看相對(duì)應(yīng)的樣式。
3、組件封裝——自定義輪播圖
3.1、創(chuàng)建swiper-doc.vue組件
3.2、組件調(diào)用，封裝完成
首先我們要清楚，我們封裝的內(nèi)容為我們自定義的部分，swiper滑塊區(qū)域是不需要封裝的是通用的，我們使用插槽站位。我們只需要將我們自定義的指示點(diǎn)、介紹文字、漸變模塊封裝即可。
示例代碼如下：
swiper-doc.vue文件：
<template>
<view class="position-relative">
<!-- 輪播圖組件不需要直接使用插槽 -->
<slot></slot>
<view class="flex align-center text-white rounded-bottom-lg px-2 pb-1" style="position: absolute; bottom: 0; left: 0; right: 0;
background-image: linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,0.8));">
<view style="width: 80%;" class="text-ellipsis">
<!-- 獲取當(dāng)前指示點(diǎn)的位置，獲取對(duì)應(yīng)的title -->
<text>{{info[current].title}}</text>
</view>
<view style="width: 20%;" class="flex align-center justify-end flex-shrink">
<!-- 指示點(diǎn)選中當(dāng)前圖片為白色 未選中為灰色 -->
<view v-for="(item,index) in info" :key="index" style="height: 16rpx;width: 16rpx ; "
class="rounded-circle ml-1"
:style="index===current?'background-color:rgba(255,255,255,1)':'background-color:rgba(255,255,255,0.5)'">
</view>
</view>
</view>
</view>
</template>
<script>
export default{
props:{
info:Array,
current:{
type:Number,
default:0
}
}
}
</script>
info表示我們所需的輪播圖片數(shù)據(jù)；
current表示那個(gè)輪播圖片的索引，用于獲取title和指示點(diǎn)。
index.vue文件：
<view class="px-3 py-2 ">
<swiperDot class="position-relative" :current="current" :info="swipers">
<!--
swiper常用屬性介紹：
indicator-dots:輪播圖正前方的小圓點(diǎn)(此案例沒有使用官方提供的，是自定義的在右下角附近)
autoplay：是否自動(dòng)切換
interval：圖片輪播間隔此處為3秒
duration：圖片輪播動(dòng)畫時(shí)長(zhǎng) 此處為0.5秒
circular：是否開啟無縫輪播（此處為到第三張圖片后無縫播放第一張圖片）
-->
<swiper :autoplay="true" :interval="3000" :duration="500" circular style="height: 250rpx;"
@change="changeIndicatorDots">
<swiper-item v-for="(item,index) in swipers" :key="index">
<image :src="item.src" mode="sapectFill" style="height:250rpx;width: 100%;" class="rounded-lg">
</image>
</swiper-item>
</swiper>
</swiperDot>
</view>
<script>
// 引入指示點(diǎn)組件，注冊(cè)并使用
import swiperDot from '@/components/comon/swiper-doc.vue'
export default {
components: {
swiperDot
},
data() {
return {
current: 0, // 標(biāo)識(shí)當(dāng)前選中的圖片序列號(hào)
swipers: [{
src: '/static/swiper/1.jpg',
title: '自定義輪播圖組件圖片一'
}, {
src: '/static/swiper/2.jpg',
title: '自定義輪播圖組件圖片二名字很長(zhǎng)測(cè)試用'
}, {
src: '/static/swiper/3.jpg',
title: '自定義輪播圖組件圖片三'
}]
}
},
onLoad() {
},
methods: {
// changeIndicatorDots方法會(huì)在輪播的圖片切換后調(diào)用，e.detail.current表示當(dāng)前所在滑塊的 index
changeIndicatorDots(e) {
this.current = e.detail.current
}
}
}
</script>
注意：文章案例中的swipers數(shù)組在實(shí)際開發(fā)中應(yīng)該是從后端獲取的，我們這里是自己直接定義的。
到此這篇關(guān)于uniapp小程序開發(fā)組件封裝之自定義輪播圖的文章就介紹到這了,更多相關(guān)uniapp自定義輪播圖內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JS提示：Uncaught SyntaxError:Unexpected token ) 錯(cuò)誤的解決方法
這篇文章主要介紹了JS提示：Uncaught SyntaxError:Unexpected token ) 錯(cuò)誤的解決方法,結(jié)合實(shí)例形式分析了javascript提示此類異常的常見原因與相關(guān)解決方法,需要的朋友可以參考下2016-08-08
這篇文章主要介紹了如何阻止小程序遮罩層下方圖層滾動(dòng),文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09
微信小程序scroll-view仿拼多多橫向滑動(dòng)滾動(dòng)條
這篇文章主要為大家詳細(xì)介紹了微信小程序scroll-view仿拼多多橫向滑動(dòng)滾動(dòng)條，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-07-07
本篇文章主要是對(duì)JS去除字符串兩端空格的簡(jiǎn)單實(shí)例進(jìn)行了介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2013-12-12
今天小編就為大家分享一篇layui的table單擊行勾選checkbox功能方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08
DOM是Document Object Model文檔對(duì)象模型的縮寫；使用JavaScript操作DOM進(jìn)行DHTML開發(fā)2011-12-12
小程序使用webview內(nèi)嵌h5頁(yè)面 wx.miniProgram.getEnv失效問題
本文主要介紹了小程序使用webview內(nèi)嵌h5頁(yè)面 wx.miniProgram.getEnv失效問題，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
window.location不跳轉(zhuǎn)的問題解決方法
window.location的跳轉(zhuǎn)失效的情況有沒有遇到過啊，這主要是冒泡傳遞影響了，下面有個(gè)不錯(cuò)的解決方法，大家可以參考下2014-04-04
這篇文章主要介紹了JS刪除對(duì)象中某一屬性案例詳解,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-09-09
JavaScript Accessor實(shí)現(xiàn)說明
關(guān)于Getter與Setter大家一定不會(huì)陌生,下面簡(jiǎn)單介紹幾種我所知道的在JavaScript中實(shí)現(xiàn)G/S的方法.2010-12-12