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