微信小程序?qū)崿F(xiàn)圖片滾動(dòng)效果示例
更新時(shí)間：2018年12月05日 14:44:37 作者：myloveqiqi
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)圖片滾動(dòng)效果,結(jié)合實(shí)例形式分析了微信小程序基于swiper組件的圖片滾動(dòng)效果相關(guān)實(shí)現(xiàn)技巧與操作注意事項(xiàng),需要的朋友可以參考下
本文實(shí)例講述了微信小程序?qū)崿F(xiàn)圖片滾動(dòng)效果。分享給大家供大家參考，具體如下：
效果：左右滑動(dòng)可以切換展示圖片
代碼：
<!--pages/test/test.wxml-->
<!-- 組件 -->
<swiper>
<swiper-item wx:for="{{imgUrls}}">
<image src='{{item}}' width="335" height="150" mode='widthFix' class='img' />
</swiper-item>
</swiper>
pages/test/test.js：
Page({
data: {
imgUrls:[
'https://gss0.baidu.com/9fo3dSag_xI4khGko9WTAnF6hhy/zhidao/wh%3D600%2C800/sign=8b20fba45e6034a829b7b087fb23656c/14ce36d3d539b60028f67d12eb50352ac65cb75e.jpg',
'https://gss0.baidu.com/9vo3dSag_xI4khGko9WTAnF6hhy/zhidao/wh%3D600%2C800/sign=3386e39a49fbfbeddc0c3e7948c0db0e/32fa828ba61ea8d3943606a1950a304e251f587a.jpg',
'http://img04.sogoucdn.com/app/a/100520093/ca86e620b9e623ff-d72d635343d5bade-dcf2acda7a45cb44f172db138bdf8d2d.jpg',
]
},
//事件處理函數(shù)
toupper:function(){
console.log("觸發(fā)了toupper");
}
})
pages/test/test.wxss：
.img{
width: 100%;
}
運(yùn)行結(jié)果：
心得：
- swiper組件：滑塊視圖容器。
- 可以為swiper添加autoplay屬性，是之自動(dòng)播放，例如：
autoplay=”true” - swiper組件中使用的是image單標(biāo)簽，而不是雙標(biāo)簽（否則報(bào)錯(cuò)）。
希望本文所述對(duì)大家微信小程序開(kāi)發(fā)有所幫助。
您可能感興趣的文章:
- 微信小程序 scroll-view隱藏滾動(dòng)條詳解
- 微信小程序scroll-view實(shí)現(xiàn)滾動(dòng)穿透和阻止?jié)L動(dòng)的方法
- 詳解微信小程序scroll-view橫向滾動(dòng)的實(shí)踐踩坑及隱藏其滾動(dòng)條的實(shí)現(xiàn)
- 微信小程序頂部可滾動(dòng)導(dǎo)航效果
- 微信小程序scroll-view組件實(shí)現(xiàn)滾動(dòng)動(dòng)畫(huà)
- 微信小程序-滾動(dòng)消息通知的實(shí)例代碼
- 微信小程序滾動(dòng)Tab實(shí)現(xiàn)左右可滑動(dòng)切換
- 微信小程序頁(yè)面上下滾動(dòng)效果
- 微信小程序?qū)崿F(xiàn)無(wú)限滾動(dòng)列表
- 微信小程序?qū)崿F(xiàn)水平垂直滾動(dòng)
相關(guān)文章
淺析JS中常用類(lèi)型轉(zhuǎn)換及運(yùn)算符表達(dá)式
這篇文章主要介紹了關(guān)于JS中涉及的常用類(lèi)型轉(zhuǎn)換及運(yùn)算符表達(dá)式 ,包括js中常用類(lèi)型轉(zhuǎn)換，及常用的運(yùn)算符表達(dá)式，需要的朋友可以參考下2017-07-07
前端實(shí)現(xiàn)水印功能的幾種方法及優(yōu)缺點(diǎn)
這篇文章主要介紹了前端開(kāi)發(fā)中實(shí)現(xiàn)網(wǎng)頁(yè)或圖像水印的六種方法,包括使用CSS背景圖、HTML5?Canvas、SVG、圖片處理庫(kù)、HTML?DOM元素以及后端生成,每種方法都有其優(yōu)缺點(diǎn),適用于不同的場(chǎng)景,需要的朋友可以參考下2025-01-01
JavaScript樹(shù)型數(shù)據(jù)與一維數(shù)組相互轉(zhuǎn)換方式
這篇文章主要介紹了JavaScript樹(shù)型數(shù)據(jù)與一維數(shù)組相互轉(zhuǎn)換方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
JavaScript實(shí)現(xiàn)頁(yè)面中錄音功能的方法
這篇文章主要給大家介紹了關(guān)于JavaScript實(shí)現(xiàn)頁(yè)面中錄音功能的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)消滅星星小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-01-01
這里列出了一些JS重要知識(shí)點(diǎn)（不全面，但自己感覺(jué)很重要）。徹底理解并掌握這些知識(shí)點(diǎn)，對(duì)于每個(gè)想要深入學(xué)習(xí)JS的朋友應(yīng)該都是必須的2011-11-11
這篇文章主要介紹了webpack v4 從dev到prd的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-04-04
微信小程序api列表匯總包括網(wǎng)絡(luò)API,媒體API,文件API ,微信小程序支付流程,位置API,界面API等
這篇文章主要介紹了微信小程序api列表匯總包括網(wǎng)絡(luò)API,媒體API,文件API ,數(shù)據(jù)API,位置API,界面API,微信小程序支付流程,微信小程序登錄流程等,需要的朋友可以參考下2022-12-12
封裝一個(gè)公用Echarts圖表組件的3種模板代碼示例
這篇文章主要給大家介紹了關(guān)于封裝一個(gè)公用Echarts圖表組件的3種模板,定義圖表公共樣式是為了統(tǒng)一同一網(wǎng)站各頁(yè)面圖表的基礎(chǔ)樣式,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-02-02
這篇文章主要介紹了推薦閱讀的js快速判斷IE瀏覽器(兼容IE10與IE11),因?yàn)閕e11取消了很多低版本的判斷，很多js都需要修改了，這里簡(jiǎn)單介紹下需要的朋友可以參考下2015-12-12