欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

uniapp小程序開發(fā)組件封裝之自定義輪播圖效果

 更新時間: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組件

滑塊視圖容器。

一般用于左右滑動或上下滑動,比如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)的樣式。

點擊跳轉(zhuǎn)下載free.css文件

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輕松實現(xiàn)獲取表單數(shù)據(jù)

    利用JS輕松實現(xiàn)獲取表單數(shù)據(jù)

    本文主要介紹了利用JS輕松實現(xiàn)獲取表單數(shù)據(jù)。方法有別于原始的做法,大家可以試著找原始做法與本文所說方法之間的區(qū)別。有興趣的朋友可以看下,希望對大家有所幫助
    2016-12-12
  • js基于setTimeout與setInterval實現(xiàn)多線程

    js基于setTimeout與setInterval實現(xiàn)多線程

    這篇文章主要介紹了js基于setTimeout與setInterval實現(xiàn)多線程的方法,分析了多線程的原理與javascript模擬實現(xiàn)多線程的相關(guān)技巧,需要的朋友可以參考下
    2016-06-06
  • 項目中使用Typescript封裝axios

    項目中使用Typescript封裝axios

    這篇文章主要為大家介紹了項目中使用Typescript封裝axios的示例過程詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-07-07
  • 詳解JavaScript的定時器

    詳解JavaScript的定時器

    這篇文章主要為大家介紹了JavaScript的定時器 ,具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助
    2021-11-11
  • JavaScript BASE64算法實現(xiàn)(完美解決中文亂碼)

    JavaScript BASE64算法實現(xiàn)(完美解決中文亂碼)

    這篇文章主要介紹了JavaScript BASE64算法實現(xiàn)(完美解決中文亂碼),先用escape()對中文進(jìn)行編碼.然后再進(jìn)行base64編碼. 解碼時,再加入()對中文進(jìn)行解碼,這樣就可以避免中文亂碼問題
    2017-01-01
  • 微信小程序?qū)W習(xí)筆記之頁面配置與路由方式

    微信小程序?qū)W習(xí)筆記之頁面配置與路由方式

    這篇文章主要給大家介紹了關(guān)于微信小程序?qū)W習(xí)筆記之頁面配置與路由方式的相關(guān)資料,頁面配置和路由是學(xué)習(xí)微信小程序必然會遇到的,本文通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2021-06-06
  • JS實現(xiàn)判斷有效的數(shù)獨算法示例

    JS實現(xiàn)判斷有效的數(shù)獨算法示例

    這篇文章主要介紹了JS實現(xiàn)判斷有效的數(shù)獨算法,結(jié)合實例形式分析了javascript數(shù)獨判斷的原理及相關(guān)算法實現(xiàn)、使用操作技巧,需要的朋友可以參考下
    2019-02-02
  • javascript函數(shù)中的3個高級技巧

    javascript函數(shù)中的3個高級技巧

    這篇文章主要為大家詳細(xì)介紹了javascript函數(shù)中的3個高級技巧,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-09-09
  • kindeditor編輯器點中圖片滾動條往上頂?shù)腷ug

    kindeditor編輯器點中圖片滾動條往上頂?shù)腷ug

    這篇文章主要介紹了kindeditor編輯器點中圖片滾動條往上頂?shù)腷ug的相關(guān)資料,需要的朋友可以參考下
    2015-07-07
  • 小程序canvas實現(xiàn)畫布半圓環(huán)

    小程序canvas實現(xiàn)畫布半圓環(huán)

    這篇文章主要為大家詳細(xì)介紹了小程序canvas實現(xiàn)畫布半圓環(huán),文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-06-06

最新評論