微信小程序?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)文章
Echarts是一款基于JavaScript的數(shù)據(jù)可視化庫,它提供了豐富的圖表類型,本文將詳細(xì)介紹如何使用Echarts來繪制氣泡圖,并介紹氣泡圖相關(guān)的配置,需要的可以參考下2023-12-12
JavaScript和jQuery獲取input框的絕對位置實現(xiàn)方法
下面小編就為大家?guī)硪黄狫avaScript和jQuery獲取input框的絕對位置實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
這篇文章主要介紹了如何使用 JavaScript創(chuàng)建待辦事項列表HTML的完整信息和教程，文中但是示例代碼講解詳細(xì)，感興趣的同學(xué)可以動手試一試2022-01-01
Javascript中匿名函數(shù)的調(diào)用與寫法實例詳解(多種)
js中定義函數(shù)的方式有很多種，函數(shù)直接量就是其中一種，下面通過本文給大家介紹匿名函數(shù)是如何調(diào)用的及匿名函數(shù)的n中寫法，對js匿名函數(shù)調(diào)用，js匿名函數(shù)寫法相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2016-01-01
onload事件當(dāng)一個頁面或是一張圖片加載完成時被觸發(fā)，在body上不僅可以用onload，而且還支持多個HTML標(biāo)簽.用法如下2013-09-09
這篇文章主要為大家詳細(xì)介紹了bootstrap paginator分頁前后臺用法示例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
layui問題之模擬table表格中的選中按鈕選中事件的方法
今天小編就為大家分享一篇layui問題之模擬table表格中的選中按鈕選中事件的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
Electron autoUpdater實現(xiàn)Windows安裝包自動更新的方法
這篇文章主要介紹了Electron autoUpdater實現(xiàn)Windows安裝包自動更新的方法,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)分享商品海報功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
本文給大家記錄的是一次谷歌Chrome瀏覽器擴(kuò)展程序的開發(fā)過程，非常的細(xì)致，有類似開發(fā)念頭的小伙伴們可以來參考下2016-01-01