uniapp小程序開發(fā)組件封裝之自定義輪播圖效果
??前言:
本文主要展示小程序端封裝輪播圖組件,使用的是uniapp進(jìn)行的開發(fā),主要使用的是uniapp官網(wǎng)提供的
swiper
組件,可以參考官方文檔,查看一些相關(guān)API。效果圖一睹為快:
話不多說直接上正文一起來學(xué)習(xí)一下封裝輪播圖組件吧!
??正文
1、首先了解swiper組件
滑塊視圖容器。
一般用于左右滑動或上下滑動,比如banner輪播圖。
注意滑動切換和滾動的區(qū)別,滑動切換是一屏一屏的切換。
swiper
下的每個swiper-item
是一個滑動切換區(qū)域,不能停留在2個滑動區(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、自定義輪播圖效果展示說明
我們要做的是:
輪播圖底部顏色漸變
左下方包含對應(yīng)圖片的一行文字說明
指示點在右下方,選中顏色為白色,未選中為灰色
效果圖如下:
2、完成自定義輪播圖效果
我們先完成效果再去探討如何封裝成組件。如下示例代碼展示了自定義輪播圖的效果:
swiper
常用屬性介紹:
indicator-dots
:輪播圖正前方的小圓點(此案例沒有使用官方提供的,是自定義的在右下角附近)autoplay
:是否自動切換interval
:圖片輪播間隔此處為3秒duration
:圖片輪播動畫時長 此處為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)前指示點的位置,獲取對應(yīng)的title --> <text>{{swipers[current].title}}</text> </view> <view style="width: 20%;" class="flex align-center justify-end flex-shrink"> <!-- 指示點選中當(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)識當(dāng)前選中的圖片序列號 swipers: [{ src: '/static/swiper/1.jpg', title: '自定義輪播圖組件圖片一' }, { src: '/static/swiper/2.jpg', title: '自定義輪播圖組件圖片二名字很長測試用' }, { src: '/static/swiper/3.jpg', title: '自定義輪播圖組件圖片三' }] } }, onLoad() { }, methods: { // changeIndicatorDots方法會在輪播的圖片切換后調(diào)用,e.detail.current表示當(dāng)前所在滑塊的 index changeIndicatorDots(e) { this.current = e.detail.current } } } </script>
示例代碼中的class類中的類名樣式是我已經(jīng)在全局配置好的,由于篇幅比較長,之后的小程序文章也會經(jīng)常使用,我已經(jīng)上傳到了CSDN資源(免費),點擊鏈接跳轉(zhuǎn)下載可查看相對應(yīng)的樣式。
3、組件封裝——自定義輪播圖
3.1、創(chuàng)建swiper-doc.vue組件
3.2、組件調(diào)用,封裝完成
首先我們要清楚,我們封裝的內(nèi)容為我們自定義的部分,swiper滑塊區(qū)域是不需要封裝的是通用的,我們使用插槽站位。我們只需要將我們自定義的指示點、介紹文字、漸變模塊封裝即可。
示例代碼如下:
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)前指示點的位置,獲取對應(yīng)的title --> <text>{{info[current].title}}</text> </view> <view style="width: 20%;" class="flex align-center justify-end flex-shrink"> <!-- 指示點選中當(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表示那個輪播圖片的索引,用于獲取title和指示點。
index.vue文件:
<view class="px-3 py-2 "> <swiperDot class="position-relative" :current="current" :info="swipers"> <!-- swiper常用屬性介紹: indicator-dots:輪播圖正前方的小圓點(此案例沒有使用官方提供的,是自定義的在右下角附近) autoplay:是否自動切換 interval:圖片輪播間隔此處為3秒 duration:圖片輪播動畫時長 此處為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> // 引入指示點組件,注冊并使用 import swiperDot from '@/components/comon/swiper-doc.vue' export default { components: { swiperDot }, data() { return { current: 0, // 標(biāo)識當(dāng)前選中的圖片序列號 swipers: [{ src: '/static/swiper/1.jpg', title: '自定義輪播圖組件圖片一' }, { src: '/static/swiper/2.jpg', title: '自定義輪播圖組件圖片二名字很長測試用' }, { src: '/static/swiper/3.jpg', title: '自定義輪播圖組件圖片三' }] } }, onLoad() { }, methods: { // changeIndicatorDots方法會在輪播的圖片切換后調(diào)用,e.detail.current表示當(dāng)前所在滑塊的 index changeIndicatorDots(e) { this.current = e.detail.current } } } </script>
注意:文章案例中的swipers數(shù)組在實際開發(fā)中應(yīng)該是從后端獲取的,我們這里是自己直接定義的。
到此這篇關(guān)于uniapp小程序開發(fā)組件封裝之自定義輪播圖的文章就介紹到這了,更多相關(guān)uniapp自定義輪播圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
js基于setTimeout與setInterval實現(xiàn)多線程
這篇文章主要介紹了js基于setTimeout與setInterval實現(xiàn)多線程的方法,分析了多線程的原理與javascript模擬實現(xiàn)多線程的相關(guān)技巧,需要的朋友可以參考下2016-06-06JavaScript BASE64算法實現(xiàn)(完美解決中文亂碼)
這篇文章主要介紹了JavaScript BASE64算法實現(xiàn)(完美解決中文亂碼),先用escape()對中文進(jìn)行編碼.然后再進(jìn)行base64編碼. 解碼時,再加入()對中文進(jìn)行解碼,這樣就可以避免中文亂碼問題2017-01-01kindeditor編輯器點中圖片滾動條往上頂?shù)腷ug
這篇文章主要介紹了kindeditor編輯器點中圖片滾動條往上頂?shù)腷ug的相關(guān)資料,需要的朋友可以參考下2015-07-07