小程序卡片切换效果组件wxCardSwiper的实现


Posted in Javascript onFebruary 13, 2020

wxCardSwiper

小程序卡片切换效果组件. 支持异步添加卡片数据, 手势滑动触发.

源码地址: https://github.com/doterlin/wxCardSwiper

使用方法

将本项目文件中的components/cardSwiper文件夹复制到你项目的目录下,然后在页面的json配置及页面引入。自定义组件的引入和使用请参考官方文档。

本项目包含组件和页面demo,可直接运行(上滑翻到下一张,下滑回到上一张)。

参数

  • data Array 传入的初始数据数组
  • loadmore 事件 当需要加载更多数据时出发。

示例

小程序卡片切换效果组件wxCardSwiper的实现

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; //大于总页数时退出
    wx.request({
      url: 'yourApiurl', //仅为示例,并非真实的接口地址
      data: {
        page: this.data.currentPage,
      },
      success (res) {
        detail.addToList(res.data); //调用detail.addToList将新数据累加到组件内部数据
      }
    })
  }
})

更详细示例请参考本项目中pages/index页面

修改样式

如果样式和结构不能满足展示需求,你需要到cardSwiper组件里自行修改wxml和wxss代码。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 行背景颜色的交替显示(隔行变色)实现代码
Dec 13 Javascript
Dreamweaver jQuery智能提示插件,支持版本提示,支持1.6api
Jul 31 Javascript
JQuery的$和其它JS发生冲突的快速解决方法
Jan 24 Javascript
javascript的document.referrer浏览器支持、失效情况总结
Jul 18 Javascript
前端必备神器 Snap.svg 弹动效果
Nov 10 Javascript
基于原生js淡入淡出函数封装(兼容IE)
Oct 20 Javascript
JS动态的把左边列表添加到右边的实现代码(可上下移动)
Nov 17 Javascript
JavaScript字符串_动力节点Java学院整理
Jun 27 Javascript
JS装饰器函数用法总结
Apr 21 Javascript
微信小程序使用gitee进行版本管理
Sep 20 Javascript
vue 实现cli3.0中使用proxy进行代理转发
Oct 30 Javascript
Vue js with语句原理及用法解析
Sep 03 Javascript
JavaScript实现省市区三级联动
Feb 13 #Javascript
jquery传参及获取方式(两种方式)
Feb 13 #jQuery
JS实现页面数据懒加载
Feb 13 #Javascript
node.js中fs文件系统模块的使用方法实例详解
Feb 13 #Javascript
原生JS与JQ获取元素的区别详解
Feb 13 #Javascript
node.js中path路径模块的使用方法实例分析
Feb 13 #Javascript
node.js中stream流中可读流和可写流的实现与使用方法实例分析
Feb 13 #Javascript
You might like
php在字符串中查找另一个字符串
2008/11/19 PHP
php 根据url自动生成缩略图并处理高并发问题
2014/01/23 PHP
php实现将任意进制数转换成10进制的方法
2015/04/17 PHP
PHP7正式版测试,性能惊艳!
2015/12/08 PHP
Yii快速入门经典教程
2015/12/28 PHP
php调用自己java程序的方法详解
2016/05/13 PHP
PHP获取用户客户端真实IP的解决方案
2016/10/10 PHP
ext前台接收action传过来的json数据示例
2014/06/17 Javascript
nodejs中实现路由功能
2014/12/29 NodeJs
javascript修改图片src的方法
2015/01/27 Javascript
jQuery基于ajax实现带动画效果无刷新柱状图投票代码
2015/08/10 Javascript
JavaScript通过使用onerror设置默认图像显示代替alt
2016/03/01 Javascript
javascript中Date对象应用之简易日历实现
2016/07/12 Javascript
基于jQuery实现咖啡订单管理简单应用
2017/02/10 Javascript
详解JS数组Reduce()方法详解及高级技巧
2017/08/18 Javascript
微信小程序蓝牙连接小票打印机实例代码详解
2019/06/03 Javascript
Node使用Selenium进行前端自动化操作的代码实现
2019/10/10 Javascript
JS判断浏览器类型与操作系统的方法分析
2020/04/30 Javascript
JavaScript实现手机号码 3-4-4格式并控制新增和删除时光标的位置
2020/06/02 Javascript
Vue3新特性之在Composition API中使用CSS Modules
2020/07/13 Javascript
javascript中闭包closure的深入讲解
2021/03/03 Javascript
python 中文乱码问题深入分析
2011/03/13 Python
python pdb调试方法分享
2014/01/21 Python
wxpython 最小化到托盘与欢迎图片的实现方法
2014/06/09 Python
自己使用总结Python程序代码片段
2015/06/02 Python
python调用c++传递数组的实例
2019/02/13 Python
python自定义函数实现最大值的输出方法
2019/07/09 Python
python3.x提取中文的正则表达式示例代码
2019/07/23 Python
简单了解如何封装自己的Python包
2020/07/08 Python
OpenCV Python实现图像指定区域裁剪
2021/03/12 Python
Sentry错误日志监控使用方法解析
2020/11/12 Python
澳大利亚音乐商店:Bava’s Music City
2019/05/05 全球购物
土木工程应届生求职信
2013/10/31 职场文书
打架检讨书800字
2014/01/10 职场文书
办公室主任个人对照检查材料思想汇报
2014/10/11 职场文书
婚宴祝酒词大全
2015/08/10 职场文书