小程序卡片切換效果組件wxCardSwiper的實現(xiàn)
更新時間：2020年02月13日 11:39:37 作者：doterlin
這篇文章主要介紹了小程序卡片切換效果組件wxCardSwiper的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
wxCardSwiper
小程序卡片切換效果組件. 支持異步添加卡片數(shù)據(jù), 手勢滑動觸發(fā).
源碼地址: https://github.com/doterlin/wxCardSwiper
使用方法
將本項目文件中的components/cardSwiper文件夾復制到你項目的目錄下，然后在頁面的json配置及頁面引入。自定義組件的引入和使用請參考官方文檔。
本項目包含組件和頁面demo，可直接運行(上滑翻到下一張，下滑回到上一張)。
參數(shù)
- data Array 傳入的初始數(shù)據(jù)數(shù)組
- loadmore 事件 當需要加載更多數(shù)據(jù)時出發(fā)。
示例
yourPage.json頁面配置（下面的路徑換成你copy到項目的path）
{
"usingComponents": {
"CardSwiper": "/components/cardSwiper/cardSwiper"
}
}
yourPage.wxml頁面結構
<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ù)
}
})
}
})
更詳細示例請參考本項目中pages/index頁面
修改樣式
如果樣式和結構不能滿足展示需求，你需要到cardSwiper組件里自行修改wxml和wxss代碼。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
js遍歷json對象所有key及根據(jù)動態(tài)key獲取值的方法(必看)
下面小編就為大家?guī)硪黄猨s遍歷json對象所有key及根據(jù)動態(tài)key獲取值的方法(必看)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
JS查找字符串中出現(xiàn)最多的字符及個數(shù)統(tǒng)計
最近在項目中遇到這樣的需求：求字符串'nininihaoa'中出現(xiàn)次數(shù)最多字符。怎么實現(xiàn)呢？下面小編給大家分享具體實現(xiàn)代碼，需要的朋友參考下吧2017-02-02
最近項目中遇到些字符串亂碼問題，解決后有些心得，記錄于此。2009-12-12
JavaScript如何一次性展示幾萬條數(shù)據(jù)
本文主要介紹了JavaScript一次性展示幾萬條數(shù)據(jù)的實現(xiàn)方法。具有很好的參考價值，下面跟著小編一起來看下吧2017-03-03
這篇文章主要給大家介紹了關于Three.js中矩陣和向量使用的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用Three.js具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-03-03
這篇文章主要介紹了JavaScript中字符串的常用操作方法及js特殊字符,需要的朋友可以參考下2018-03-03
這篇文章主要為大家詳細介紹了JS實現(xiàn)多功能計算器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10
這篇文章主要介紹了ES6 Promise對象的應用,結合實例形式分析了Promise對象原理與異步處理相關操作技巧,需要的朋友可以參考下2019-06-06
這篇文章主要介紹了javascript 易錯知識點,結合實例形式總結分析了javascript 對象屬性、繼承常見易錯知識點與注意事項,需要的朋友可以參考下2020-04-04
這篇文章主要介紹了如何在js中引入less的變量,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-07-07