微信小程序——你可以自己实现一个探探滑动
theme: fancy
公司最近要做一个类似于探探滑动卡片的需求，经过周五和周末两天的啪啦啪啦，终于做出来基本符合需求的组件，最终的效果图就是这样的了。
小程序卡片滑动组件
介绍
此组件是使用原生微信小程序代码开发的一款高性能的卡片滑动组件，无外部依赖，导入即可使用。其主要功能效果类似探探的卡片滑动。
用法
获取：
git clone https://github.com/hspprogrammer/wx_card_swiper.git
相关文件介绍：
/components
- /cardSwiper
/pages
- /index
- /components
- /card
- /components
- /index
其中，components文件夹下的card组件是cardSwipe组件的抽象节点，放置卡片内容，需要调用者自己实现。而cardSwipe组件为卡片功能的具体实现。pages下的index为调用组件的页面，可供参考。
功能介绍
亮点：
- 动态新增
- 卡片的wxml节点数不受卡片列表的大小影响，只等于卡片展示数，如果每次只展示三张卡片，那么卡片所代表的节点数只有三个
- 支持调节各种属性（滑动速度，旋转角度，卡片展示数…等等）
- 支持点击切换
优化
由于组件支持动态的删除以及替换，这使得我们可以以很小的卡片列表来展示超多（or 无限）的卡片
场景1：实现一个超多的卡片展示（比如1000张）
原本实现思路：利用wx:if,只渲染当前展示的card和后面两张card,然后监听cardChange回调函数，再切换到比如最后三张的时候请求下一页数据，直接push到渲染的数组中，因为有wx:if的控制，虽然数据增多，但渲染的节点还是只有三个。具体的性能没有测试，但在手机测试时候，直观感觉没有多大的性能问题。
新的实现思路：首先要实现循环展示的逻辑，以分页的形式每次从后台获取数据，先获取第一页cardsData和第二页nextPageData的数据。每切换一张图片就从nextPageData拿到相同位置的数据替换cardsData的数据，当切换到第一页的最后showNum（一次性展示几个card）条数据时候，会进入到循环从头重新开始渲染cardsData的数据，这个时候cardsData里的数据实际是下一页nextPageData的数据，同时再请求第三页的数据赋值给nextPageData，循环往复。。。。。。
感谢思路来源提供思路，代码逻辑自己实现。
微信小程序——你可以自己实现一个探探滑动相关推荐
- 微信小程序+阿里云+stm32f407的一个项目
** 微信小程序+阿里云+stm32f407的一个项目## 小程序参考了大神半颗心脏的博客和资料, 小程序多个页面推送数据 因为自己做小程序是类似商城的一个demo, 其中数据需要与单片机进行交互,而 ...
- 新手如何用微信小程序和云数据库做一个论坛？【帖子页】
新手小白用微信小程序和云数据库做一个论坛[帖子页] 先放个效果图 由于后面换了头像,所以评论的头像和发帖的头像不一样. 要做个同款论坛,首先需要用到云数据库.在微信开发者工具的左上角开通云开发就可以了 ...
- 一个微信小程序的诞生，来自一个互联网新生儿的探索
一个微信小程序的诞生,来自一个互联网新生儿的探索 故事之初 这是在家的第三个月,前段实践参加了字节跳动的一个小活动,认识了一些同一个地方的小伙伴,机缘巧合之下,我决定学习开发一款小程序. 一款用来推广 ...
- php 实现tab切换_微信小程序实例：实现顶部tab切换以及滑动切换时导航栏会随着移动的效果（代码）...
本篇文章给大家带来的内容是关于微信小程序实例:实现顶部tab切换以及滑动切换时导航栏会随着移动的效果(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 实现的效果: js: Pa ...
- [微信小程序]组件化开发,以一个自定义模块框组件当做示例(附完整示例代码和效果图)
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: 自定义组件我把它分为简单的三个步骤, 1.创建组件 --- 2.编写组件 --- 3.调用,使用 ...
- 【微信小程序】带你做一个公众号留言系统（附源码）
公众号留言小程序正式开源,文章底部有源码获取方式. 我当时就用微信小程序做了一个留言助手,用了大约一个月左右的时间,留言系统的基本功能包括留言.点赞.筛选.置顶.删除.关联多个公众号等,只需要把小程序 ...
- 微信小程序+PHP 从零写一个微信小程序
微信小程序是越来越火,参与其中的开发者也越来越多,但是很多朋友都是只懂小程序前端开发,或者是只懂 PHP 开发,本 Chat 就是想让这部分人能够自己一个人把前后端串起来,做一个专属自己的微信小程序. ...
- 微信小程序~云开发实现的一个社区 Demo（完结~）
微信云开发 官方介绍文档 开发者可以使用云开发开发微信小程序.小游戏,无需搭建服务器,即可使用云端能力.云开发为开发者提供完整的云端支持,弱化后端和运维概念,无需搭建服务器,使用平台提供的 API 进 ...
- taro做项目html写在哪里,用Taro写一个微信小程序（一）——开始一个项目
一.Taro简介 1.名字由来 Taro['tɑ:roʊ],泰罗·奥特曼,宇宙警备队总教官,实力最强的奥特曼. 2.taro是什么 Taro 是一个开放式跨端跨框架解决方案,支持使用 React/Vu ...
最新文章
- JSON数据格式介绍
- 8255控制四个双色灯C语言,汇编语言实现通过8255A和4个开关控制实现8个LED灯和8个7位数码管显示指定数字全亮、全灭、从左至右、从右至左跑马灯式点亮...
- 02_反汇编_反编译
- Integer的缓存机制
- 学习重要，还是学会学习重要
- RTOS原理与实现09：事件标志组实现
- Android网易歌词json接口,网易云音乐API接口-music
- python 规则引擎 drools_Drools规则引擎入门指南（一）
- VMware虚拟机迁移到阿里云实操案例
- 高盛发布区块链报告：从理论到实践（中文版）七
- 苹果公司为什么储备那么多现金？
- java tetris_Java | Tetris
- 分享三个可以在家做的正规兼职工作，看到就是赚到
- Google Adsense 西联汇款
- 从光猫的发出到另一个光猫的接入
- java生成短信验证码_Java随机生成手机短信验证码的方法
- Qt 如何实现的 Meta Object
- 【前端-Js基础方法】字符串常用方法汇总
- 破解root密码，简单粗暴—干就完了！！！
- miui nexus5x_谷歌太子式微，Nexus是否将要被废？