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

2024-12-17 17:36:46

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

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

微信小程序实现点击卡片翻转效果

动画效果: wxml: <view class='main'>  <view class="box b1" animation="{{animationMain}}" bindtap='rotateFn' data-id="1" > <image src=""></image> </view>
微信小程序实现手势滑动卡片效果

最近工作中有项目要使用微信小程序技术进行开发,其中一项功能困扰了我很久,卡片滑动动效以及手势识别.经过一番研究和参考,现在把成果展示.记录自己踩到的坑,如果大家有需要,也可以帮助到大家. 效果图: 首先是卡片布局的实现: 图片(一) 如图所示,我采用绝对定位absolute的方式,辅助index,可以实现卡片的层叠效果.注意:三张卡片一定都是相同的定位,否则index可能不起作用. 代码: //设置position: absolute; left:50%:后,再 margin-left:负(一半
微信小程序实现单个卡片左滑显示按钮并防止上下滑动干扰功能

实现类似ios端微信的左滑显示置顶.删除按钮的功能,首先需将按钮部分设为绝对定位,并且right设为负值溢出屏幕.利用小程序事件处理的api,分别读取触摸开始,触摸移动时,触摸结束的X/Y坐标,根据差值来改变整个卡片的位置. 这里有一个细节,为了防止按钮的点击干扰到卡片主部分的滑动,需要将整个卡片分为两部分. <View style={`${positionStyle[index]}`}> <View onTouchStart={this.moveTaskStart} onTouchMo
微信小程序实现卡片左右滑动效果的示例代码

快放假了,人狠话不多,啥也不说了.先看效果图. 思路从上面的效果图来看,基本的需求包括: 左右滑动到一定的距离,就向相应的方向移动一个卡片的位置. 卡片滑动的时候有一定的加速度. 如果滑动距离太小,则依旧停留在当前卡片,而且有一个回弹的效果. 看到这样的需求,不熟悉小程序的同学,可能感觉有点麻烦.首先需要计算卡片的位置,然后再设置滚动条的位置,使其滚动到指定的位置,而且在滚动的过程中,加上一点加速度... 然而,当你查看了小程序的开发文档之后,就会发现小程序已经帮我们提前写好了,我们只要做相关
小程序实现层叠卡片滑动效果

小程序层叠卡片滑动效果,供大家参考,具体内容如下效果图 wxml  <view class="teachers_banner"> <view class="lunbo_center clearfix teachers_b"> <view class="slide" id="slide" bindtouchstart='moveStart' bindt
微信小程序实现卡片层叠滑动效果

本文实例为大家分享了微信小程序之卡片层叠滑动效果的具体代码,供大家参考,具体内容如下代码: js: // index/gun/jsSwiper2/jsSwiper2.js Page({ /** * 页面的初始数据 */ data: { startX: 0, endX: 0, iCenter: 3, datas: [{ id: 1, zIndex: 2, opacity: 0.2, left: 40, iamge: "../../images/1.jpg", animation: nu
小程序卡片切换效果组件wxCardSwiper的实现

wxCardSwiper 小程序卡片切换效果组件. 支持异步添加卡片数据, 手势滑动触发. 源码地址: https://github.com/doterlin/wxCardSwiper 使用方法将本项目文件中的components/cardSwiper文件夹复制到你项目的目录下,然后在页面的json配置及页面引入.自定义组件的引入和使用请参考官方文档. 本项目包含组件和页面demo,可直接运行(上滑翻到下一张,下滑回到上一张). 参数 data Array 传入的初始数据数组 loadmore
微信小程序中的swiper组件详解

微信小程序中的swiper组件微信小程序中的swiper组件真的是简单方便提供了页面中图片文字等滑动的效果 <swiper> <swiper-item></swiper-item> <swiper-item></swiper-item> <swiper-item></swiper-item> </swiper> 这里的就是一个滑块视图容器:而就是你希望滑动的东西,可以是文字也可以是image 其中swipe
微信小程序图片轮播组件gallery slider使用方法详解

本文实例为大家分享了微信小程序图片轮播组件的具体代码,供大家参考,具体内容如下先上效果图: wxml <scroll-view scroll-y="true" style="height:200px" class="page-body" bindscrolltolower="loadMore"> <view class="swiper"> <swiper class=&quo
微信小程序常用视图容器组件使用详解

目录 1.组件概述 2.常用的试图容器组件 2.1view 2.2scroll-view 2.3swiper 1.组件概述组件是视图层基本的组成单元,具备UI风格样式以及特定的功能效果.当打开某款小程序之后,界面中的图片.文字等元素都需要使用组件,小程序组件使用灵活,组件之间通过相互嵌套进行界面设计,开发者可以通过组件的选择和样式属性设计出不同的界面效果.一个组件包括开始标签和结束标签,属性用来装饰这个组件的样式. 其语法格式如下: <标签名称属性="值">内容<
微信小程序 tabs选项卡效果的实现

微信小程序 tabs选项卡效果前言: 最近微信应用号是炒的如火如荼,热门满满,但是也可以发现搜索关键词出来,各类网站出现的还都是微信的官方文档解释.正好赶上这个热潮,这几天先把小程序技术文档看了个遍,就直接着手写案例了.很多组件微信内部已经封装完了,正好发现没有tab选项卡效果,这两天正好研究了下.思路如下: 1.首先点击导航的时候需要两个变量,一个存储当前点击样式类,一个是其它导航默认的样式类 2.选项卡内容列表同样也需要两个变量,一个存储当前显示块,一个存储的是其它隐藏的默认块 3.使用三
微信小程序 UI与容器组件总结

微信小程序 UI与容器组件总结 1.总结与概述 2.容器组件 2.1 组件容器(view) 2.2 可滚动视图容器(scroll-view) 2.3 滑块视图容器(swiper) 1.总结与概述 1.1 UI组件总结图 1.2 概述小程序的UI组件也就是定义用户界面的一系列标签,类似于html标签.一个完整用户响应过程:事件触发-->UI组件接收到事件-->触发js函数响应事件-->更新UI 2.容器组件 2.1 容器组件(view) (1)总结 (2)例子效果图 page.wx
微信小程序如何自定义table组件

背景最近想要捣鼓一个自己的小程序,其中数据展示部分比较多,想用table来做展示,但是微信小程序并没有table组件,于是就自己动手捣鼓了一个,勉强能用. 可以看看效果: etable使用介绍 etable的使用很简单,分为引入.使用.配置等3个阶段 1.引入首先在要使用的页面中的json文件中配置如下: { "usingComponents": { "etable" : "/compenents/etable/etable" } } 2.
微信小程序实现选项卡效果

本文实例为大家分享了微信小程序实现选项卡效果展示的具体代码,供大家参考,具体内容如下 demo.wxss .swiper-tab{ width: 100%; border-bottom: 2rpx solid #777777; text-align: center; line-height: 80rpx;} .swiper-tab-list{ font-size: 30rpx; display: inline-block; width: 33.33%; color: #777777; } .on
微信小程序使用 vant Dialog组件的正确方式

简介 Vant是有赞开源的一套基于Vue2.0的Mobile组件库.通过Vant,可以快速搭建出风格统一的页面,提升开发效率.目前已有近50个组件,这些组件被广泛使用于有赞的各个移动端业务中.Vant旨在更快.更简单地开发基于Vue的美观易用的移动站点.特性组件都是来源于有赞的微商城业务,并且经过有赞业务的检验,更靠谱完善详实的中文文档专门的设计师团队维护视觉规范,统一而优雅支持babel-plugin-import单测覆盖率超过90%建议搭配webpack,babel使用Vant. 在 app
微信小程序接入vant Weapp组件的详细步骤

刚创建的项目的文件结构首先在你项目的根目录下打开终端,输入npm init 对项目初始化这时会生成pachage.json文件. 继续在终端运行以下命令我这里用这个: npm i vant-weapp -S --production 运行完如图所示: 安装成功后回到小程序开发工具点击工具 => 构建npm 运行完截图: 完成后在编辑器右边的详情把红框内的打勾上使用组件在你想使用组件库的的json文件内引入组件.比如你想在fundIncome页面内使用button组件. 效果: 上

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

相关推荐

随机推荐