小程序?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:頁面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;?
? /* 繼承夫類的高 */
}然后就是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)文章
這篇文章主要介紹了angularjs模態(tài)框的使用代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-12-12
這篇文章主要介紹了關(guān)于JS中的箭頭函數(shù),ES6中允許使用=>來定義函數(shù)。箭頭函數(shù)相當(dāng)于匿名函數(shù)，并簡(jiǎn)化了函數(shù)定義,箭頭函數(shù)在語法上比普通函數(shù)簡(jiǎn)潔多。箭頭函數(shù)就是采用箭頭=>來定義函數(shù)，省去關(guān)鍵字function,需要的朋友可以參考下2023-05-05
javascript 文字上下間隔滾動(dòng)的代碼 符合WEB標(biāo)準(zhǔn) 腳本之家修正版
javascript 文字上下間隔滾動(dòng)的代碼 符合WEB標(biāo)準(zhǔn) 腳本之家修正版，這里提供了兩個(gè)版本，第二個(gè)在firefox下運(yùn)行有些問題大家可以修改下，第一個(gè)的高度問題，已經(jīng)修正，其實(shí)就是簡(jiǎn)單的加了css樣式。2009-12-12
基于小程序請(qǐng)求接口wx.request封裝的類axios請(qǐng)求
這篇文章主要介紹了基于小程序請(qǐng)求接口wx.request封裝的類axios請(qǐng)求，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
JavaScript中join()、splice()、slice()和split()函數(shù)用法示例
這篇文章主要介紹了JavaScript中join()、splice()、slice()和split()函數(shù)用法,結(jié)合實(shí)例形式較為詳細(xì)的分析了join()、splice()、slice()和split()函數(shù)的功能、使用方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2018-08-08
獲取圖片尺寸(不設(shè)置寬高)及放大圖片：利用了IE的私有屬性防止圖片放大失真嚴(yán)重！感興趣的朋友可以參考下2013-09-09
詳解如何在JavaScript中創(chuàng)建線性儀表圖
線性儀表圖表示顯示所需值的垂直或水平線性刻度，帶有顏色刻度以及單個(gè)或多個(gè)指針。本文將詳細(xì)講解如何利用JavaScript創(chuàng)建線性儀表圖，需要的可以參考一下2022-03-03
最近繼續(xù)玩一些微信小程序的api來做例子,感覺自己可能創(chuàng)造力不很足,只能模仿著別人的例子來做一個(gè)自己的計(jì)算器了,下面這篇文章主要給大家介紹了關(guān)于微信小程序計(jì)算器實(shí)現(xiàn)案例的相關(guān)資料,需要的朋友可以參考下2023-06-06
150行代碼帶你實(shí)現(xiàn)微信小程序中的數(shù)據(jù)偵聽
在這篇文章中, 我將用150行代碼, 手把手帶你打造一個(gè)小程序也可以使用的偵聽器，感興趣的朋友跟隨小編一起看看吧2019-05-05
可選鏈操作符(?.)允許讀取位于鏈接對(duì)象鏈身處的屬性的值，本文就詳細(xì)的介紹一下，感興趣的小伙伴們可以參考一下2021-06-06