微信小程序中如何實(shí)現(xiàn)輪播圖效果
一、swiper視圖容器組件
swiper是輪播圖的外層容器，所以使用輪播圖就必須使用到swiper標(biāo)簽。
二、swiper相關(guān)屬性
存在默認(rèn)樣式：
1 width 100%
2 height 150px
三、swiper-item輪播項(xiàng)
只能放置在swiper組件中。表示每一個(gè)輪播項(xiàng)。
四、代碼實(shí)現(xiàn)
<!-- index.wxml代碼如下 -->
<view>
<swiper interval="1000" indicator-dots="true" autoplay="true" circular="true">
<swiper-item>
<image mode="widthFix" src="https://img-blog.csdnimg.cn/5589ae9720df44fda0967faaa288a553.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBALeW4jOWGgC0=,size_20,color_FFFFFF,t_70,g_se,x_16"></image>
</swiper-item>
<swiper-item class="cri">
<image mode="widthFix" src="https://img-blog.csdnimg.cn/5580029c6bed471487fe93983088cbae.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBALeW4jOWGgC0=,size_20,color_FFFFFF,t_70,g_se,x_16"></image>
</swiper-item>
<swiper-item>
<image mode="widthFix" src="https://img-blog.csdnimg.cn/1472745c740d42caa002fb5b24b0069a.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBALeW4jOWGgC0=,size_20,color_FFFFFF,t_70,g_se,x_16"></image>
</swiper-item>
</swiper>
</view>編譯效果：
五、注意事項(xiàng)
當(dāng)切換機(jī)型后，就可以方向，圖片的寬高與效果不一樣
1.分析和升級(jí)版本，解決換機(jī)型的寬高問(wèn)題
①先找出 原圖片的寬度和高度 ，我這里的原圖寬高是491*327
②等比例 給swiper 定 寬度和高度
swiper 寬度 / swiper 高度 = 原圖的寬度 / 原圖的高度
由上面可以推出：
swiper 高度 = swiper 寬度 * 原圖的高度 / 原圖的寬度
即 swiper 高度 = calc(100vw * 327 / 491)
③需要知道的是：css中vm是視口單位，1vw=視口寬度的百分之一，而swiper 寬度的默認(rèn)是100%，即相當(dāng)于100vm
所以只需要在相對(duì)應(yīng)的wcss中加入如下樣式即可
swiper {
width: 100%;
height: calc(100vw * 327 / 491);
}
image {
width: 100%;
}此時(shí)編譯再觀察效果，任何機(jī)型都能達(dá)到預(yù)期效果啦
到此這篇關(guān)于微信小程序中實(shí)現(xiàn)輪播圖效果的文章就介紹到這了,更多相關(guān)小程序輪播圖內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了JS變量提升,結(jié)合實(shí)例形式分析了JS變量提升基本概念、功能、原理、用法及相關(guān)注意事項(xiàng),需要的朋友可以參考下2020-05-05
java和javascript獲取word文檔的書(shū)簽位置對(duì)比
這篇文章主要介紹了java和javascript獲取word文檔的書(shū)簽位置代碼對(duì)比,需要的朋友可以參考下2014-06-06
基于函數(shù)執(zhí)行的踩坑(addEventListener)
這篇文章主要介紹了基于函數(shù)執(zhí)行的踩坑(addEventListener)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
JS實(shí)現(xiàn)選項(xiàng)卡效果的代碼實(shí)例
這篇文章主要介紹了JS選項(xiàng)卡效果，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
本文主要介紹了Ajax 實(shí)現(xiàn)不刷新取最新商品的方法。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-03-03
javascript正則表達(dá)式定義（語(yǔ)法）總結(jié)
這篇文章主要介紹了javascript正則表達(dá)式定義,對(duì)于JavaScript正則表達(dá)式的語(yǔ)法進(jìn)行了總結(jié)分析,需要的朋友可以參考下2016-01-01
javascript中cookie對(duì)象用法實(shí)例分析
這篇文章主要介紹了javascript中cookie對(duì)象用法,實(shí)例分析了javascript針對(duì)cookie對(duì)象的寫(xiě)入、讀取及刪除等操作的使用方法,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-01-01
使用mpvue搭建一個(gè)初始小程序及項(xiàng)目配置方法
這篇文章主要介紹了使用mpvue搭建一個(gè)初始小程序及項(xiàng)目配置方法,需要的朋友可以參考下2018-12-12
基于微信小程序?qū)崿F(xiàn)人臉數(shù)量檢測(cè)的開(kāi)發(fā)步驟
最近項(xiàng)目需求是統(tǒng)計(jì)當(dāng)前攝像頭中的人臉個(gè)數(shù),所以下面這篇文章主要給大家介紹了關(guān)于基于微信小程序?qū)崿F(xiàn)人臉數(shù)量檢測(cè)的相關(guān)資料,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12
8個(gè)開(kāi)發(fā)者必須知道的JavaScript深層概念(推薦)
JavaScript有一個(gè)名為“調(diào)用堆?！保–all Stack）的簡(jiǎn)單列表，它逐一管理任務(wù)（堆棧算法），但是當(dāng)異步任務(wù)被傳遞時(shí)，JavaScript會(huì)把它彈出到web API，瀏覽器就會(huì)處理它，這篇文章主要介紹了8個(gè)開(kāi)發(fā)者必須知道的JavaScript深層概念，需要的朋友可以參考下2022-10-10