<!--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ì)大家微信小程序開發(fā)有所幫助。

您可能感興趣的文章:

相關(guān)文章

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