小程序卡片切换效果组件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 相关文章推荐
JS随机生成不重复数据的实例方法
Jul 17 Javascript
Javascript和Java获取各种form表单信息的简单实例
Feb 14 Javascript
js四舍五入数学函数round使用实例
May 09 Javascript
javascript检测两个数组是否相似
May 19 Javascript
JS面向对象(3)之Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法
Feb 25 Javascript
js 动态生成html 触发事件传参字符转义的实例
Feb 14 Javascript
微信小程序 出现47001 data format error原因解决办法
Mar 10 Javascript
Angular中ng-repeat与ul li的多层嵌套重复问题
Jul 24 Javascript
angularJS开发注意事项
May 26 Javascript
js中对象与对象创建方法的各种方法
Feb 27 Javascript
浅谈vue中组件绑定事件时是否加.native
Nov 09 Javascript
JS数组方法join()用法实例分析
Jan 18 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
我的论坛源代码(一)
2006/10/09 PHP
php将fileterms函数返回的结果变成可读的形式
2011/04/21 PHP
php json_encode奇怪问题说明
2011/09/27 PHP
关于js与php互相传值的介绍
2013/06/25 PHP
PHP动态页生成静态页的3种常用方法
2014/11/13 PHP
Laravel框架实现即点即改功能的方法分析
2019/10/31 PHP
thinkphp5 框架结合plupload实现图片批量上传功能示例
2020/04/04 PHP
cnblogs csdn 代码运行框实现代码
2009/11/02 Javascript
jquery 批量上传图片实现代码
2010/01/28 Javascript
jquery.boxy弹出框(后隔N秒后自动隐藏/自动跳转)
2013/01/15 Javascript
jQuery实现异步获取json数据的2种方式
2014/08/29 Javascript
JQuery表格拖动调整列宽效果(自己动手写的)
2014/09/01 Javascript
JS实现判断滚动条滚到页面底部并执行事件的方法
2014/12/18 Javascript
jQuery中$this和$(this)的区别介绍(一看就懂)
2015/07/06 Javascript
BootStrap智能表单实战系列(四)表单布局介绍
2016/06/13 Javascript
Mac 安装 nodejs方法(图文详细步骤)
2017/10/30 NodeJs
纯js代码生成可搜索选择下拉列表的实例
2018/01/11 Javascript
Openlayers实现图形绘制
2020/09/28 Javascript
mac安装scrapy并创建项目的实例讲解
2018/06/13 Python
Flask框架钩子函数功能与用法分析
2019/08/02 Python
python不相等的两个字符串的 if 条件判断为True详解
2020/03/12 Python
详解css3使用transform出现字体模糊的解决办法
2020/10/16 HTML / CSS
美国东北部户外服装和设备零售商:Eastern Mountain Sports
2016/10/05 全球购物
日本卡普空电视游戏软件公司官方购物网站:e-CAPCOM
2018/07/17 全球购物
Europcar德国:全球汽车租赁领域的领导者
2018/08/15 全球购物
西班牙在线药店:DosFarma
2020/03/28 全球购物
英文自我鉴定
2013/12/10 职场文书
《识字五》教学反思
2014/03/01 职场文书
六年级学生评语
2014/04/22 职场文书
工程材料采购方案
2014/05/18 职场文书
在职党员进社区活动总结
2014/07/05 职场文书
公司领导班子四风对照检查材料
2014/09/27 职场文书
介绍长城的导游词
2015/01/30 职场文书
开天辟地观后感
2015/06/09 职场文书
教师个人工作总结范文2015
2015/10/14 职场文书
matplotlib如何设置坐标轴刻度的个数及标签的方法总结
2021/06/11 Python