小程序卡片切换效果组件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 相关文章推荐
简洁短小的 JavaScript IE 浏览器判定代码
Mar 21 Javascript
JavaScript中的16进制字符(改进)
Nov 21 Javascript
IE6下opacity与JQuery的奇妙结合
Mar 01 Javascript
js使用数组判断提交数据是否存在相同数据
Nov 27 Javascript
JavaScript中的toDateString()方法使用详解
Jun 12 Javascript
轻松实现jquery手风琴效果
Jan 14 Javascript
CSS或者JS实现鼠标悬停显示另一元素
Jan 22 Javascript
基于RequireJS和JQuery的模块化编程——常见问题全面解析
Apr 14 Javascript
js 自带的sort() 方法全面了解
Aug 16 Javascript
Bootstrap Table的使用总结
Oct 08 Javascript
浅谈JavaScript的自动垃圾收集机制
Dec 15 Javascript
vue2.0安装style/css loader的方法
Mar 14 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 class中public,private,protected的区别以及实例分析
2013/06/18 PHP
PHP实现根据浏览器跳转不同语言页面代码
2013/08/02 PHP
Linux下安装PHP MSSQL扩展教程
2014/10/24 PHP
分享php代码将360浏览器导出的favdb的sqlite数据库文件转换为html
2015/12/09 PHP
php实现微信公众号主动推送消息
2015/12/31 PHP
thinkPHP2.1自定义标签库的导入方法详解
2016/07/20 PHP
浅析2种JavaScript继承方式
2015/12/04 Javascript
浅谈在vue项目中如何定义全局变量和全局函数
2017/10/24 Javascript
JavaScript实现重力下落与弹性效果的方法分析
2017/12/20 Javascript
nodejs基础之常用工具模块util用法分析
2018/12/26 NodeJs
微信小程序 生成携带参数的二维码
2019/10/23 Javascript
高效jQuery选择器的5个技巧实例分析
2019/11/26 jQuery
vant 自定义 van-dropdown-item的用法
2020/08/05 Javascript
详解Django通用视图中的函数包装
2015/07/21 Python
Python2随机数列生成器简单实例
2017/09/04 Python
Django中使用celery完成异步任务的示例代码
2018/01/23 Python
[原创]windows下Anaconda的安装与配置正解(Anaconda入门教程)
2018/04/05 Python
python多线程并发让两个LED同时亮的方法
2019/02/18 Python
Python3.5面向对象程序设计之类的继承和多态详解
2019/04/24 Python
pytorch的梯度计算以及backward方法详解
2020/01/10 Python
tensorflow使用range_input_producer多线程读取数据实例
2020/01/20 Python
在pycharm中为项目导入anacodna环境的操作方法
2020/02/12 Python
Java Spring项目国际化(i18n)详细方法与实例
2020/03/20 Python
Python新手学习函数默认参数设置
2020/06/03 Python
结合CSS3的布局新特征谈谈常见布局方法
2016/01/22 HTML / CSS
美国老牌主机服务商:iPage
2016/07/22 全球购物
阿根廷在线宠物商店:Puppis
2018/03/23 全球购物
使用Vue.js和MJML创建响应式电子邮件
2021/03/23 Vue.js
工厂门卫岗位职责范本
2014/04/04 职场文书
校车安全责任书
2014/08/25 职场文书
个人创业事迹材料
2014/12/30 职场文书
研究生导师评语
2014/12/31 职场文书
捐款仪式主持词
2015/07/04 职场文书
小学安全教育主题班会
2015/08/12 职场文书
准备去美国留学,那么大学申请文书应该怎么写?
2019/08/12 职场文书
SpringBoot系列之MongoDB Aggregations用法详解
2022/02/12 MongoDB