小程序卡片切換效果組件wxCardSwiper的實現(xiàn)
wxCardSwiper
小程序卡片切換效果組件. 支持異步添加卡片數(shù)據(jù), 手勢滑動觸發(fā).
源碼地址: https://github.com/doterlin/wxCardSwiper
使用方法
將本項目文件中的components/cardSwiper文件夾復(fù)制到你項目的目錄下,然后在頁面的json配置及頁面引入。自定義組件的引入和使用請參考官方文檔。
本項目包含組件和頁面demo,可直接運行(上滑翻到下一張,下滑回到上一張)。
參數(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-11JavaScript中的函數(shù)聲明和函數(shù)表達(dá)式區(qū)別淺析
這篇文章主要介紹了JavaScript中的函數(shù)聲明和函數(shù)表達(dá)式區(qū)別淺析,本文總結(jié)的淺顯易懂,非常好的一篇技術(shù)文章,需要的朋友可以參考下2015-03-03JavaScript?canvas實現(xiàn)水球加載動畫
這篇文章主要為大家詳細(xì)介紹了JavaScript?canvas實現(xiàn)水球加載動畫,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-04-04js實現(xiàn)的xml對象轉(zhuǎn)json功能示例
這篇文章主要介紹了js實現(xiàn)的xml對象轉(zhuǎn)json功能,結(jié)合實例形式分析了javascript轉(zhuǎn)換成xml所涉及的字符串、對象、數(shù)組、遍歷等操作技巧與使用方法,需要的朋友可以參考下2016-12-12javascript實現(xiàn)圖片自動和可控的輪播切換特效
這篇文章主要介紹了javascript實現(xiàn)圖片自動和可控的輪播切換特效,效果非常的棒,推薦給大家,有需要的小伙伴可以參考下。2015-04-04