小程序卡片切换效果组件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 相关文章推荐
深入聊聊Array的sort方法的使用技巧.详细点评protype.js中的sortBy方法
Apr 12 Javascript
js鼠标滑过图片震动特效的方法
Feb 17 Javascript
Jquery实现弹性滑块滑动选择数值插件
Aug 08 Javascript
12种JavaScript常用的MVC框架比较分析
Nov 16 Javascript
win7下安装配置node.js+express开发环境
Dec 06 Javascript
分享12个非常实用的JavaScript小技巧
May 11 Javascript
JQueryEasyUI框架下的combobox的取值和绑定的方法
Jan 22 Javascript
详解如何运行vue项目
Apr 15 Javascript
vue.js 2.*项目环境搭建、运行、打包发布的详细步骤
May 01 Javascript
javascript之分片上传,断点续传的实际项目实现详解
Sep 05 Javascript
layui监听单元格编辑前后交互的例子
Sep 16 Javascript
JS动态图片的实现方法完整示例
Jan 13 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反弹shell实现代码
2009/04/22 PHP
PHP遍历二维数组的代码
2011/04/22 PHP
javascript 获取网页参数系统
2008/07/19 Javascript
JQuery 文本框使用小结
2010/05/22 Javascript
jQuery 选择器详解
2015/01/19 Javascript
使用bootstrap插件实现模态框效果
2017/05/10 Javascript
使用jQuery实现鼠标点击左右按钮滑动切换
2017/08/04 jQuery
JS中使用media实现响应式布局
2017/08/04 Javascript
解决vue2.0动态绑定图片src属性值初始化时报错的问题
2018/03/14 Javascript
详解extract-text-webpack-plugin 的使用及安装
2018/06/12 Javascript
详解Vue取消eslint语法限制
2018/08/04 Javascript
jquery层次选择器的介绍
2019/01/18 jQuery
layui动态加载多表头的实例
2019/09/05 Javascript
JavaScript和TypeScript中的void的具体使用
2019/09/12 Javascript
vue打开新窗口并实现传参的图文实例
2021/03/04 Vue.js
paramiko模块安装和使用(远程登录服务器)
2014/01/27 Python
python进阶教程之循环相关函数range、enumerate、zip
2014/08/30 Python
python通过post提交数据的方法
2015/05/06 Python
python 生成器生成杨辉三角的方法(必看)
2017/04/10 Python
详解Django之admin组件的使用和源码剖析
2018/05/04 Python
Python实现string字符串连接的方法总结【8种方式】
2018/07/06 Python
python实现自动获取IP并发送到邮箱
2018/12/26 Python
python学习——内置函数、数据结构、标准库的技巧(推荐)
2019/04/18 Python
基于Python的PIL库学习详解
2019/05/10 Python
Python 音频生成器的实现示例
2019/12/24 Python
Python tkinter布局与按钮间距设置方式
2020/03/04 Python
房地产销售计划书
2014/01/10 职场文书
学习十八大坚定理想信念心得体会
2014/03/11 职场文书
竞选班委演讲稿
2014/04/28 职场文书
争先创优活动总结
2014/08/27 职场文书
优秀教师申报材料
2014/12/16 职场文书
2015年司法所工作总结
2015/04/27 职场文书
小学生安全保证书
2015/05/09 职场文书
学校扫黄打非工作总结
2015/10/15 职场文书
七年级作文之《我和我的祖国》观后感作文
2019/10/18 职场文书
MySQL中datetime时间字段的四舍五入操作
2021/10/05 MySQL