微信小程序開發(fā)實(shí)現(xiàn)輪播圖
更新時(shí)間：2022年06月24日 09:51:57 作者：開發(fā)者小埋
這篇文章主要為大家詳細(xì)介紹了微信小程序開發(fā)實(shí)現(xiàn)輪播圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
小程序，移動(dòng)端離不開輪播圖的功能，下面就寫一個(gè)小程序的輪播圖功能分享給大家
效果圖：
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)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript動(dòng)態(tài)設(shè)置div的樣式的方法
這篇文章主要介紹了JavaScript動(dòng)態(tài)設(shè)置div的樣式的方法的相關(guān)資料,需要的朋友可以參考下2015-12-12
利用JavaScript創(chuàng)建一個(gè)兔年春節(jié)倒數(shù)計(jì)時(shí)器
這篇文章主要介紹了如何利用JavaScript創(chuàng)建一個(gè)兔年春節(jié)倒數(shù)計(jì)時(shí)器，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)JavaScript有一定的幫助，需要的可以參考一下2023-01-01
編寫高性能的JavaScript 腳本的加載與執(zhí)行
把腳本放在body中，當(dāng)瀏覽器遇見<script>標(biāo)簽時(shí)， 瀏覽器不知道腳本會(huì)插入文本還是html標(biāo)簽，因此瀏覽器會(huì)停止分析html頁面而去執(zhí)行腳本。2010-04-04
javaScript window.event.keyCode 集合與測試方法
javaScript window.event.keyCode 集合，對(duì)于事件的代碼獲取可以用腳本監(jiān)聽來實(shí)現(xiàn)。2010-05-05
閉包是有權(quán)訪問另一個(gè)函數(shù)作用域中的變量的函數(shù)。首先要明白的就是，閉包是函數(shù)。由于要求它可以訪問另一個(gè)函數(shù)的作用于中的變量，所以我們往往是在一個(gè)函數(shù)的內(nèi)部創(chuàng)建另一個(gè)函數(shù)，而“另一個(gè)函數(shù)”就是閉包。本文對(duì)其進(jìn)行系統(tǒng)分析，需要的朋友可以看下2016-12-12
這篇文章主要介紹了JavaScript中==與+的使用方法，幫助大家更好的理解和學(xué)習(xí)JavaScript，感興趣的朋友可以了解下2020-08-08
js導(dǎo)出table到excel同時(shí)兼容FF和IE示例
js導(dǎo)出table到excel，在百度可以搜索很多的方法，但是其兼容性是相當(dāng)差的，本文制定了一個(gè)可以同時(shí)兼容FF和IE的方法，感興趣的朋友可以參考下2013-09-09
功能強(qiáng)大的Bootstrap使用手冊(cè)（一）
這篇文章主要為大家詳細(xì)介紹了功能強(qiáng)大的Bootstrap使用手冊(cè)，分享了Bootstrap使用步驟和常用用法，感興趣的小伙伴們可以參考一下2016-08-08
這篇文章主要介紹了使用js獲取身份證年齡的示例代碼，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下2020-12-12
這篇文章主要介紹了JavaScrip常見的一些算法總結(jié)的相關(guān)資料,需要的朋友可以參考下2015-12-12