微信小程序?qū)崿F(xiàn)圖片滾動效果示例

更新時間：2018年12月05日 14:44:37 作者：myloveqiqi

這篇文章主要介紹了微信小程序?qū)崿F(xiàn)圖片滾動效果,結(jié)合實例形式分析了微信小程序基于swiper組件的圖片滾動效果相關(guān)實現(xiàn)技巧與操作注意事項,需要的朋友可以參考下

本文實例講述了微信小程序?qū)崿F(xiàn)圖片滾動效果。分享給大家供大家參考，具體如下：

效果：左右滑動可以切換展示圖片

代碼：

<!--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%;
}

運行結(jié)果：

心得：

swiper組件：滑塊視圖容器。
可以為swiper添加autoplay屬性，是之自動播放，例如：autoplay=”true”
swiper組件中使用的是image單標(biāo)簽，而不是雙標(biāo)簽（否則報錯）。

希望本文所述對大家微信小程序開發(fā)有所幫助。

您可能感興趣的文章:

相關(guān)文章

淺析JS中常用類型轉(zhuǎn)換及運算符表達(dá)式
這篇文章主要介紹了關(guān)于JS中涉及的常用類型轉(zhuǎn)換及運算符表達(dá)式 ,包括js中常用類型轉(zhuǎn)換，及常用的運算符表達(dá)式，需要的朋友可以參考下
2017-07-07
前端實現(xiàn)水印功能的幾種方法及優(yōu)缺點
這篇文章主要介紹了前端開發(fā)中實現(xiàn)網(wǎng)頁或圖像水印的六種方法,包括使用CSS背景圖、HTML5?Canvas、SVG、圖片處理庫、HTML?DOM元素以及后端生成,每種方法都有其優(yōu)缺點,適用于不同的場景,需要的朋友可以參考下
2025-01-01
JavaScript樹型數(shù)據(jù)與一維數(shù)組相互轉(zhuǎn)換方式
這篇文章主要介紹了JavaScript樹型數(shù)據(jù)與一維數(shù)組相互轉(zhuǎn)換方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-06-06
JavaScript實現(xiàn)頁面中錄音功能的方法
這篇文章主要給大家介紹了關(guān)于JavaScript實現(xiàn)頁面中錄音功能的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
2019-06-06
JS實現(xiàn)消滅星星小游戲
這篇文章主要為大家詳細(xì)介紹了JS實現(xiàn)消滅星星小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-01-01
JS重要知識點小結(jié)
這里列出了一些JS重要知識點（不全面，但自己感覺很重要）。徹底理解并掌握這些知識點，對于每個想要深入學(xué)習(xí)JS的朋友應(yīng)該都是必須的
2011-11-11
webpack v4 從dev到prd的方法
這篇文章主要介紹了webpack v4 從dev到prd的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
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
封裝一個公用Echarts圖表組件的3種模板代碼示例
這篇文章主要給大家介紹了關(guān)于封裝一個公用Echarts圖表組件的3種模板,定義圖表公共樣式是為了統(tǒng)一同一網(wǎng)站各頁面圖表的基礎(chǔ)樣式,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-02-02
推薦閱讀的js快速判斷IE瀏覽器(兼容IE10與IE11)
這篇文章主要介紹了推薦閱讀的js快速判斷IE瀏覽器(兼容IE10與IE11),因為ie11取消了很多低版本的判斷，很多js都需要修改了，這里簡單介紹下需要的朋友可以參考下
2015-12-12