小程序名片盒页面详情源代码

时间：2023-07-01 14:05 阅读数：29 人阅读分类：知识百科

　　小程序名片盒页面详情源代码是什么，最近一些小伙伴问我关于小程序名片盒页面详情源代码怎么编写?小编整理了一些知识下面小编就来为大家讲解一下关于小程序名片盒页面详情源代码的相关知识。

　　用户有多张名片，需要左右切换查看，往下切换是菜单按钮。这里需求两处滑动，用到了微信提供给我们的滑动组件 swiper，并且进行了嵌套使用，第一层是名片展示与菜单按钮的上下滑动，第二层是名片展示的左右滑动(支持互相嵌套使用的，可以放心使用)。

　　Vertical 加上就是纵向滑动，去掉即是左右滑动。整体结构如下所示：

　　点击事件绑定的是数据切换方式，因为需要支持多次点击切换。

　　初始化数据是 nextSlide：

　　再看下 nextSlide 事件。currentSlide 是当前页面的 index，改变它即可完成切换效果，可以看上图初始化数据时设置了 cs 是 0。

　　因而赋值当前 data.cs+1 即可，再把绑定点击事件 clickNext 切换成 nextSlideAgain。

　　再看下 nextSlideAgain 事件，执行的减去 1 个索引，实现多次点击切换效果。

　　具体效果可以看到。点击个人名片进去编辑名片页面，由于需要带参，故而使用的是 wx.navgateTo。

　　以上就是小编为大家整理的关于小程序名片盒页面详情源代码的内容。更多更精彩的内容请持续关注微信素材网。