小程序?qū)崿F(xiàn)輪播圖
更新時(shí)間：2022年06月24日 11:17:56 作者：蘇三金
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)輪播圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了小程序?qū)崿F(xiàn)輪播圖的具體代碼，供大家參考，具體內(nèi)容如下
那個(gè)先上效果：
step1:頁(yè)面index.wxml代碼
<!-- 輪播 -->
<swiper class='u-wrp-bnr' indicator-dots='true' autoplay='true' interval='5000' duration='1000' circular='true'>
?? ?<block wx:for="{{bnrUrl}}" wx:for-index="index" wx:key="index">
?? ??? ?<swiper-item>
?? ??? ??? ?<image src='{{item.image}}' class='u-img-slide' ></image>
?? ??? ?</swiper-item>
?? ?</block>
</swiper>step2:配置信息也就是index.js
Page({
? data: {
? ? bnrUrl: [],
? },
? onLoad: function () {
? ? // 輪播?
? ? wx.request({
? ?? ?url: 'https://locally.uieee.com/slides',
? ?? ?success (res) {
? ? // console.log(res.data)
? ? ? this.setData({
? ? ? ? icons:res.data
? ? ? })
? ?})
}) ?step3:樣式文件 index.wxss
/* 輪播 */
.u-wrp-bnr {
? width: 100%;
? height: 300rpx;
? display: block;
? position: relative;
? /* top: rpx; */
? background: #f0f0f0;
}
.u-img-slide {
? width: 100%;
? height: inherit;?
? /* 繼承夫類(lèi)的高 */
}然后就是wx.require({})中傳遞一個(gè)對(duì)象，這個(gè)對(duì)象的屬性分別對(duì)應(yīng)不同的含義
wx.request({
? url: 'test.php', //僅為示例，并非真實(shí)的接口地址
? data: {
? ? x: '',
? ? y: ''
? },
? header: {
? ? 'content-type': 'application/json' // 默認(rèn)值
? },
? success (res) {
? ? console.log(res.data)
? }
})下面解釋一下：
url：請(qǐng)求地址，必填
data：請(qǐng)求的參數(shù)
method：HTTP 請(qǐng)求方法，默認(rèn)為get
dataType：返回的數(shù)據(jù)格式，默認(rèn)為json
success：接口調(diào)用成功的回調(diào)函數(shù)
fail：接口調(diào)用失敗的回調(diào)函數(shù)
complete：接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會(huì)執(zhí)行）
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
微信小程序使用picker組件出現(xiàn)的問(wèn)題探究
這篇文章主要介紹了微信小程序自定義可搜索的picker組件,主要包括自定義可搜索的picker組件的代碼以及調(diào)用實(shí)例，這里的搜索框使用的是vant微信小程序組件庫(kù)，picker使用的微信小程序的原生組件，需要的朋友可以參考下2023-01-01
Echarts可以幫助我們快速構(gòu)建柱狀圖、餅圖、條形圖,這對(duì)于多圖形化展示數(shù)據(jù)來(lái)說(shuō)尤其方便,可幫助我們快速開(kāi)發(fā),下面這篇文章主要給大家介紹了關(guān)于Echarts中l(wèi)egend屬性使用的相關(guān)資料,需要的朋友可以參考下2022-04-04
本篇內(nèi)容給大家總結(jié)了JavaScript的BUG和錯(cuò)誤，如果大家對(duì)此知識(shí)點(diǎn)有興趣，可以跟著學(xué)習(xí)參考下。2018-05-05
TypeScript 引用資源文件后提示找不到的異常處理技巧
這篇文章主要介紹了TypeScript 引用資源文件后提示找不到的異常處理,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-07-07
微信小程序?qū)崿F(xiàn)Canvas畫(huà)板源代碼
微信小程序中的畫(huà)布是非常重要的展示控件,其相當(dāng)于HTML中的canvas控件,下面這篇文章主要給大家介紹了關(guān)于微信小程序?qū)崿F(xiàn)Canvas畫(huà)板的相關(guān)資料,需要的朋友可以參考下2024-08-08
解析從小程序開(kāi)發(fā)者工具源碼看原理實(shí)現(xiàn)
小程序的架構(gòu)設(shè)計(jì)與web技術(shù)還是有一定的差別，其吸取了web技術(shù)的一些優(yōu)勢(shì)，同時(shí)也摒棄web技術(shù)中體驗(yàn)等不好的地方。下面通過(guò)問(wèn)題的形式來(lái)說(shuō)說(shuō)小程序架構(gòu)中的一些設(shè)計(jì)點(diǎn)2021-06-06
JavaScript接口防止重復(fù)請(qǐng)求的方法總結(jié)
在前端開(kāi)發(fā)中,防止重復(fù)請(qǐng)求是一個(gè)常見(jiàn)的問(wèn)題,重復(fù)請(qǐng)求不僅會(huì)增加服務(wù)器的負(fù)載,還可能導(dǎo)致數(shù)據(jù)不一致等問(wèn)題,本文為大家整理了一些常用的解決方法,需要的可以參考下2024-12-12
JavaScript判斷訪問(wèn)的來(lái)源是手機(jī)還是電腦,用的哪種瀏覽器
這篇文章主要介紹了使用JavaScript判斷訪問(wèn)的來(lái)源是手機(jī)還是電腦,用的哪種瀏覽器。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-12-12
這篇文章主要介紹了PassWord輸入框的代碼,代碼簡(jiǎn)單易懂，非常實(shí)用，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-06-06
我們要判斷一個(gè)全局對(duì)象myObj是否存在，如果不存在，就對(duì)它進(jìn)行聲明，Juriy Zaytsev指出判斷一個(gè)Javascript對(duì)象是否存在，有超過(guò)50種寫(xiě)法，下面為大家介紹幾種比較常用的，感興趣的朋友可以參考下2013-09-09