小程序實現輪播圖
更新時間：2022年06月24日 11:17:56 作者：蘇三金
這篇文章主要為大家詳細介紹了小程序實現輪播圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了小程序實現輪播圖的具體代碼，供大家參考，具體內容如下
那個先上效果：
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({})中傳遞一個對象，這個對象的屬性分別對應不同的含義
wx.request({
? url: 'test.php', //僅為示例，并非真實的接口地址
? data: {
? ? x: '',
? ? y: ''
? },
? header: {
? ? 'content-type': 'application/json' // 默認值
? },
? success (res) {
? ? console.log(res.data)
? }
})下面解釋一下：
url：請求地址，必填
data：請求的參數
method：HTTP 請求方法，默認為get
dataType：返回的數據格式，默認為json
success：接口調用成功的回調函數
fail：接口調用失敗的回調函數
complete：接口調用結束的回調函數（調用成功、失敗都會執(zhí)行）
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了微信小程序自定義可搜索的picker組件,主要包括自定義可搜索的picker組件的代碼以及調用實例，這里的搜索框使用的是vant微信小程序組件庫，picker使用的微信小程序的原生組件，需要的朋友可以參考下2023-01-01
Echarts可以幫助我們快速構建柱狀圖、餅圖、條形圖,這對于多圖形化展示數據來說尤其方便,可幫助我們快速開發(fā),下面這篇文章主要給大家介紹了關于Echarts中l(wèi)egend屬性使用的相關資料,需要的朋友可以參考下2022-04-04
本篇內容給大家總結了JavaScript的BUG和錯誤，如果大家對此知識點有興趣，可以跟著學習參考下。2018-05-05
TypeScript 引用資源文件后提示找不到的異常處理技巧
這篇文章主要介紹了TypeScript 引用資源文件后提示找不到的異常處理,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-07-07
微信小程序中的畫布是非常重要的展示控件,其相當于HTML中的canvas控件,下面這篇文章主要給大家介紹了關于微信小程序實現Canvas畫板的相關資料,需要的朋友可以參考下2024-08-08
小程序的架構設計與web技術還是有一定的差別，其吸取了web技術的一些優(yōu)勢，同時也摒棄web技術中體驗等不好的地方。下面通過問題的形式來說說小程序架構中的一些設計點2021-06-06
在前端開發(fā)中,防止重復請求是一個常見的問題,重復請求不僅會增加服務器的負載,還可能導致數據不一致等問題,本文為大家整理了一些常用的解決方法,需要的可以參考下2024-12-12
JavaScript判斷訪問的來源是手機還是電腦,用的哪種瀏覽器
這篇文章主要介紹了使用JavaScript判斷訪問的來源是手機還是電腦,用的哪種瀏覽器。需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
這篇文章主要介紹了PassWord輸入框的代碼,代碼簡單易懂，非常實用，具有參考借鑒價值，需要的朋友可以參考下2016-06-06
我們要判斷一個全局對象myObj是否存在，如果不存在，就對它進行聲明，Juriy Zaytsev指出判斷一個Javascript對象是否存在，有超過50種寫法，下面為大家介紹幾種比較常用的，感興趣的朋友可以參考下2013-09-09