微信小程序開發(fā)實現(xiàn)輪播圖
更新時間：2022年06月24日 09:51:57 作者：開發(fā)者小埋
這篇文章主要為大家詳細介紹了微信小程序開發(fā)實現(xiàn)輪播圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
小程序，移動端離不開輪播圖的功能，下面就寫一個小程序的輪播圖功能分享給大家
效果圖：
1.頁面代碼
<!--index.wxml-->
<view class="container">
? ? <!--輪播圖-->
? <swiper class="home-swiper" indicator-dots="true" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
? ? <block wx:for-items="{{lunboData}}">
? ? ? <swiper-item>
? ? ? ? <image src="{{item.imgurl}}" class="slide-image" />
? ? ? </swiper-item>
? ? </block>
? </swiper>
</view>2.配置信息
//index.js
Page({
? data: {
? ? //輪播圖配置
? ? autoplay: true,
? ? interval: 3000,
? ? duration: 1200
? },
? onLoad: function () {
? ? var that = this;?
? ? var data = {
? ? ? "datas": [
? ? ? ? {
? ? ? ? ? "id": 1,
? ? ? ? ? "imgurl": "../../images/a1.jpg"
? ? ? ? },
? ? ? ? {
? ? ? ? ? "id": 2,
? ? ? ? ? "imgurl": "../../images/a2.jpg"
? ? ? ? }
? ? ? ]
? ? };?
? ? that.setData({
? ? ? lunboData: data.datas
? ? })
? }
})3.配置樣式
/**index.wxss**/
?
/*輪播控件*/
?
.home-swiper {
? width: 95%;
? height: 360rpx;
}
?
.slide-image {
? width: 100%;
? height: 100%;
}以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript動態(tài)設(shè)置div的樣式的方法
這篇文章主要介紹了JavaScript動態(tài)設(shè)置div的樣式的方法的相關(guān)資料,需要的朋友可以參考下2015-12-12
利用JavaScript創(chuàng)建一個兔年春節(jié)倒數(shù)計時器
這篇文章主要介紹了如何利用JavaScript創(chuàng)建一個兔年春節(jié)倒數(shù)計時器，文中的示例代碼講解詳細，對我們學(xué)習(xí)JavaScript有一定的幫助，需要的可以參考一下2023-01-01
編寫高性能的JavaScript 腳本的加載與執(zhí)行
把腳本放在body中，當瀏覽器遇見<script>標簽時， 瀏覽器不知道腳本會插入文本還是html標簽，因此瀏覽器會停止分析html頁面而去執(zhí)行腳本。2010-04-04
javaScript window.event.keyCode 集合與測試方法
javaScript window.event.keyCode 集合，對于事件的代碼獲取可以用腳本監(jiān)聽來實現(xiàn)。2010-05-05
閉包是有權(quán)訪問另一個函數(shù)作用域中的變量的函數(shù)。首先要明白的就是，閉包是函數(shù)。由于要求它可以訪問另一個函數(shù)的作用于中的變量，所以我們往往是在一個函數(shù)的內(nèi)部創(chuàng)建另一個函數(shù)，而“另一個函數(shù)”就是閉包。本文對其進行系統(tǒng)分析，需要的朋友可以看下2016-12-12
這篇文章主要介紹了JavaScript中==與+的使用方法，幫助大家更好的理解和學(xué)習(xí)JavaScript，感興趣的朋友可以了解下2020-08-08
js導(dǎo)出table到excel同時兼容FF和IE示例
js導(dǎo)出table到excel，在百度可以搜索很多的方法，但是其兼容性是相當差的，本文制定了一個可以同時兼容FF和IE的方法，感興趣的朋友可以參考下2013-09-09
這篇文章主要為大家詳細介紹了功能強大的Bootstrap使用手冊，分享了Bootstrap使用步驟和常用用法，感興趣的小伙伴們可以參考一下2016-08-08
這篇文章主要介紹了使用js獲取身份證年齡的示例代碼，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下2020-12-12
這篇文章主要介紹了JavaScrip常見的一些算法總結(jié)的相關(guān)資料,需要的朋友可以參考下2015-12-12