脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 小程序卡片切换

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

 更新时间：2020年02月13日 11:39:37   作者：doterlin  
这篇文章主要介绍了小程序卡片切换效果组件wxCardSwiper的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

wxCardSwiper

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

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

使用方法

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

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

参数

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

示例


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代码。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • js遍历json对象所有key及根据动态key获取值的方法(必看)

    js遍历json对象所有key及根据动态key获取值的方法(必看)

    下面小编就为大家带来一篇js遍历json对象所有key及根据动态key获取值的方法(必看)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-03-03
  • JS查找字符串中出现最多的字符及个数统计

    JS查找字符串中出现最多的字符及个数统计

    最近在项目中遇到这样的需求：求字符串'nininihaoa'中出现次数最多字符。怎么实现呢？下面小编给大家分享具体实现代码，需要的朋友参考下吧
    2017-02-02
  • JavaScript中出现乱码的处理心得

    JavaScript中出现乱码的处理心得

    最近项目中遇到些字符串乱码问题，解决后有些心得，记录于此。
    2009-12-12
  • JavaScript如何一次性展示几万条数据

    JavaScript如何一次性展示几万条数据

    本文主要介绍了JavaScript一次性展示几万条数据的实现方法。具有很好的参考价值，下面跟着小编一起来看下吧
    2017-03-03
  • Three.js中矩阵和向量的使用教程

    Three.js中矩阵和向量的使用教程

    这篇文章主要给大家介绍了关于Three.js中矩阵和向量使用的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Three.js具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
    2019-03-03
  • JavaScript中字符串的常用操作方法及特殊字符

    JavaScript中字符串的常用操作方法及特殊字符

    这篇文章主要介绍了JavaScript中字符串的常用操作方法及js特殊字符,需要的朋友可以参考下
    2018-03-03
  • JS实现多功能计算器

    JS实现多功能计算器

    这篇文章主要为大家详细介绍了JS实现多功能计算器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-10-10
  • ES6 Promise对象的应用实例分析

    ES6 Promise对象的应用实例分析

    这篇文章主要介绍了ES6 Promise对象的应用,结合实例形式分析了Promise对象原理与异步处理相关操作技巧,需要的朋友可以参考下
    2019-06-06
  • javascript 易错知识点实例小结

    javascript 易错知识点实例小结

    这篇文章主要介绍了javascript 易错知识点,结合实例形式总结分析了javascript 对象属性、继承常见易错知识点与注意事项,需要的朋友可以参考下
    2020-04-04
  • 如何在js中引入less的变量

    如何在js中引入less的变量

    这篇文章主要介绍了如何在js中引入less的变量,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2023-07-07

最新评论