uniAPP view 和 swiper

view  看做一個div 即可

屬性說明

屬性名	類型	默認值	說明
hover-class	String	none	指定按下去的樣式類。當 hover-class="none" 時，沒有點擊態效果
hover-stop-propagation	Boolean	false	指定是否阻止本節點的祖先節點出現點擊態，App、H5、支付寶小程序、百度小程序不支持（支付寶小程序、百度小程序文檔中都有此屬性，實測未支持）
hover-start-time	Number	50	按住后多久出現點擊態，單位毫秒
hover-stay-time	Number	400	手指松開后點擊態保留時間，單位毫秒

 

冒泡可以看下 阻止一下

 

---

 

swiper  這個和原生小程序沒什么區別 主要還是：

屬性說明

屬性名	類型	默認值	說明	平台差異說明
indicator-dots	Boolean	false	是否顯示面板指示點
indicator-color	Color	rgba(0, 0, 0, .3)	指示點顏色
indicator-active-color	Color	#000000	當前選中的指示點顏色
active-class	String		swiper-item 可見時的 class	支付寶小程序
changing-class	String		acceleration 設置為 {{true}} 時且處於滑動過程中，中間若干屏處於可見時的class	支付寶小程序
autoplay	Boolean	false	是否自動切換
current	Number	0	當前所在滑塊的 index
current-item-id	String		當前所在滑塊的 item-id ，不能與 current 被同時指定	支付寶小程序不支持
interval	Number	5000	自動切換時間間隔
duration	Number	500	滑動動畫時長	app-nvue不支持
circular	Boolean	false	是否采用銜接滑動，即播放到末尾后重新回到開頭
vertical	Boolean	false	滑動方向是否為縱向
previous-margin	String	0px	前邊距，可用於露出前一項的一小部分，接受 px 和 rpx 值	app-nvue、字節跳動小程序不支持
next-margin	String	0px	后邊距，可用於露出后一項的一小部分，接受 px 和 rpx 值	app-nvue、字節跳動小程序不支持
acceleration	Boolean	false	當開啟時，會根據滑動速度，連續滑動多屏	支付寶小程序
disable-programmatic-animation	Boolean	false	是否禁用代碼變動觸發 swiper 切換時使用動畫。	支付寶小程序
display-multiple-items	Number	1	同時顯示的滑塊數量	app-nvue、支付寶小程序不支持
skip-hidden-item-layout	Boolean	false	是否跳過未顯示的滑塊布局，設為 true 可優化復雜情況下的滑動性能，但會丟失隱藏狀態滑塊的布局信息	App、微信小程序
disable-touch	Boolean	false	是否禁止用戶 touch 操作	App 2.5.5+、H5 2.5.5+、支付寶小程序、字節跳動小程序（只在初始化時有效，不能動態變更）
touchable	Boolean	true	是否監聽用戶的觸摸事件，只在初始化時有效，不能動態變更	字節跳動小程序（uni-app 2.5.5+ 推薦統一使用 disable-touch）
easing-function	String	default	指定 swiper 切換緩動動畫類型，有效值：default、linear、easeInCubic、easeOutCubic、easeInOutCubic	微信小程序、快手小程序
@change	EventHandle		current 改變時會觸發 change 事件，event.detail = {current: current, source: source}
@transition	EventHandle		swiper-item 的位置發生改變時會觸發 transition 事件，event.detail = {dx: dx, dy: dy}，支付寶小程序暫不支持dx, dy	App、H5、微信小程序、支付寶小程序、字節跳動小程序、QQ小程序、快手小程序
@animationfinish	EventHandle		動畫結束時會觸發 animationfinish 事件，event.detail = {current: current, source: source}	字節跳動小程序不支持

 

在Hbuider 直接 usw 即可快捷代碼。

swiper-item

僅可放置在 <swiper> 組件中，寬高自動設置為100%。注意：寬高100%是相對於其父組件，不是相對於子組件，不能被子組件自動撐開。

 

自己寫的一個swiper：

<template>
    <view class="page">
        <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" class="carousel">
            <swiper-item>
                <image src="../../static/swiper/batmanvssuperman.png" class="carousel"></image>
            </swiper-item>
            <swiper-item>
                <image src="../../static/swiper/spiderman.png"  class="carousel"></image>
            </swiper-item>
            <swiper-item>
                <image src="../../static/swiper/blackBao.webp"  class="carousel"></image>
            </swiper-item>
        </swiper>
    </view>
</template>

其實主要就是在C3：

 

 

 

效果：

 

 

其實就是設置這個：