微信小程序?qū)崿F(xiàn)圖片滾動效果示例
更新時間：2018年12月05日 14:44:37 作者：myloveqiqi
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)圖片滾動效果,結(jié)合實例形式分析了微信小程序基于swiper組件的圖片滾動效果相關實現(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單標簽，而不是雙標簽（否則報錯）。
希望本文所述對大家微信小程序開發(fā)有所幫助。
相關文章
這篇文章主要介紹了關于JS中涉及的常用類型轉(zhuǎn)換及運算符表達式 ,包括js中常用類型轉(zhuǎn)換，及常用的運算符表達式，需要的朋友可以參考下2017-07-07
這篇文章主要介紹了前端開發(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)頁面中錄音功能的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用JavaScript具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-06-06
這篇文章主要為大家詳細介紹了JS實現(xiàn)消滅星星小游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
這里列出了一些JS重要知識點（不全面，但自己感覺很重要）。徹底理解并掌握這些知識點，對于每個想要深入學習JS的朋友應該都是必須的2011-11-11
這篇文章主要介紹了webpack v4 從dev到prd的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
微信小程序api列表匯總包括網(wǎng)絡API,媒體API,文件API ,微信小程序支付流程,位置API,界面API等
這篇文章主要介紹了微信小程序api列表匯總包括網(wǎng)絡API,媒體API,文件API ,數(shù)據(jù)API,位置API,界面API,微信小程序支付流程,微信小程序登錄流程等,需要的朋友可以參考下2022-12-12
這篇文章主要給大家介紹了關于封裝一個公用Echarts圖表組件的3種模板,定義圖表公共樣式是為了統(tǒng)一同一網(wǎng)站各頁面圖表的基礎樣式,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-02-02
這篇文章主要介紹了推薦閱讀的js快速判斷IE瀏覽器(兼容IE10與IE11),因為ie11取消了很多低版本的判斷，很多js都需要修改了，這里簡單介紹下需要的朋友可以參考下2015-12-12