小程序卡片切換效果組件wxCardSwiper的實現(xiàn)
更新時間：2020年02月13日 11:39:37 作者：doterlin
這篇文章主要介紹了小程序卡片切換效果組件wxCardSwiper的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
wxCardSwiper
小程序卡片切換效果組件. 支持異步添加卡片數(shù)據(jù), 手勢滑動觸發(fā).
源碼地址: https://github.com/doterlin/wxCardSwiper
使用方法
將本項目文件中的components/cardSwiper文件夾復(fù)制到你項目的目錄下，然后在頁面的json配置及頁面引入。自定義組件的引入和使用請參考官方文檔。
本項目包含組件和頁面demo，可直接運(yùn)行(上滑翻到下一張，下滑回到上一張)。
參數(shù)
- data Array 傳入的初始數(shù)據(jù)數(shù)組
- loadmore 事件 當(dāng)需要加載更多數(shù)據(jù)時出發(fā)。
示例
yourPage.json頁面配置（下面的路徑換成你copy到項目的path）
{
"usingComponents": {
"CardSwiper": "/components/cardSwiper/cardSwiper"
}
}
yourPage.wxml頁面結(jié)構(gòu)
<CardSwiper data="{{swiperData}}" bindloadmore="loadMore"> </CardSwiper>
yourPage.js頁面js
Page({
data: {
currentPage: 0,
totalPage: 2,
swiperData: [{
name: "page: 0, index: 1"
},{
name: "page: 0, index: 2"
},{
name: "page: 0, index: 3"
}]
},
loadMore({detail}){
if(this.data.currentPage >= this.data.totalPage) return; //大于總頁數(shù)時退出
wx.request({
url: 'yourApiurl', //僅為示例，并非真實的接口地址
data: {
page: this.data.currentPage,
},
success (res) {
detail.addToList(res.data); //調(diào)用detail.addToList將新數(shù)據(jù)累加到組件內(nèi)部數(shù)據(jù)
}
})
}
})
更詳細(xì)示例請參考本項目中pages/index頁面
修改樣式
如果樣式和結(jié)構(gòu)不能滿足展示需求，你需要到cardSwiper組件里自行修改wxml和wxss代碼。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
javascript學(xué)習(xí)基礎(chǔ)筆記之DOM對象操作
javascript是一種基于對象和世界驅(qū)動，并且安全性較強(qiáng)的腳本語言。一個完整的javascript實現(xiàn)包括核心（ECMAScript），文檔對象模型（DOM）和瀏覽器對象模型（BOM）2011-11-11
這篇文章主要介紹了webpack-dev-middleware 源碼解讀，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
JavaScript中的函數(shù)聲明和函數(shù)表達(dá)式區(qū)別淺析
這篇文章主要介紹了JavaScript中的函數(shù)聲明和函數(shù)表達(dá)式區(qū)別淺析,本文總結(jié)的淺顯易懂,非常好的一篇技術(shù)文章,需要的朋友可以參考下2015-03-03
這篇文章主要給大家分享了js中toString方法的3個作用，文章圍繞js中toString方法的相關(guān)資料展開全文內(nèi)容，需要的小伙伴可以參考一下，希望對你的學(xué)習(xí)有所幫助2021-12-12
JavaScript?canvas實現(xiàn)水球加載動畫
這篇文章主要為大家詳細(xì)介紹了JavaScript?canvas實現(xiàn)水球加載動畫，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
js實現(xiàn)的xml對象轉(zhuǎn)json功能示例
這篇文章主要介紹了js實現(xiàn)的xml對象轉(zhuǎn)json功能,結(jié)合實例形式分析了javascript轉(zhuǎn)換成xml所涉及的字符串、對象、數(shù)組、遍歷等操作技巧與使用方法,需要的朋友可以參考下2016-12-12
這篇文章主要介紹了Bootstrap樹形組件jqTree的簡單封裝，封裝一個稍微完整點的樹形組件，感興趣的小伙伴們可以參考一下2016-01-01
下面小編就為大家?guī)硪黄猨s 簡易版滾動條實例(適用于移動端H5開發(fā))。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
javascript實現(xiàn)圖片自動和可控的輪播切換特效
這篇文章主要介紹了javascript實現(xiàn)圖片自動和可控的輪播切換特效,效果非常的棒，推薦給大家，有需要的小伙伴可以參考下。2015-04-04
這篇文章主要介紹了js判斷當(dāng)前頁面用什么瀏覽器打開的方法,需要的朋友可以參考下2016-01-01