uniapp卡片式轮播图

使用原生的swiper组件标签

<swiper style="height:240rpx" class="swiper-tall" :autoplay="true" :interval="3000" :duration="500" circular='true':display-multiple-items="4" current='0' @change="partSwiperChange"><swiper-item v-for="(list,i) in 6" :key="i"><view class='swiper-item gswGoods' data-type="goods" :data-id="list.id" :data-index="i"><view class="img-content u-flex u-row-between u-flex-col":class="[ partcurrentIndex === i || partcurrentIndexA === i?'active':'un-active']"><view class="top">￥<span>{{swiper.money[i]}}</span></view><view class="bottom">{{swiper.discount[i]}}</view></view></view></swiper-item>
</swiper>

动态绑定类，当目标项为当年项，添加过渡动画。

@change绑定卡片滑动事件，当前项n+1滑动，当走到最后一页，继续循环

partSwiperChange: function(event) {this.partcurrentIndex = event.detail.current + 1this.partcurrentIndexA = event.detail.current + 2if (event.detail.current == 6 - 2) {this.partcurrentIndexA = 6 - 1this.partcurrentIndexA = 0}if (event.detail.current == 6 - 1) {this.partcurrentIndex = 0this.partcurrentIndexA = 1}
}

uniapp卡片式轮播图相关推荐

uniapp卡片式轮播图——uView
1.下载安装uView uView2.0重磅发布,利剑出鞘,一统江湖 - DCloud 插件市场 2.在项目根目录中的main.js中,引入并使用uView的JS库,注意这两行要放在import Vu ...
uni-app卡片式轮播
uni-app卡片式轮播视图部分: <template><uni-swiper-dot :info="info" :current="current& ...
后台和小程序实现卡片式轮播图
营销活动中,轮播图效果是比较常见的,基于轮播图拓展的组件也很多,这里记录一下使用swiper实现卡片式轮播的过程,分为PC端和小程序端,其中PC端是Vue+typescript,小程序端是uni-ap ...
卡片式轮播图效果实现
基于 react 实现,vue 类似效果图思路效果图中绿色边框为轮播图区域水平式多张图片水平排列整体宽度为单张图片n倍 translateX 位移方式一次整体移动一张图片宽度 ...
html卡片式轮播图带字,卡片式轮播
// import { ce } from 'migu-sdk'; export default { name: 'zt', data() { return { activityId: 'MAC_ZP ...
android 卡片轮播图,android自定义view之卡片式轮播图
前言 Android View体系是界面编程的核心,他的重要性不亚于Android四大组件.能够熟练的编写符合需求自定义VIEW是一个android程序员进阶的重要标志,在很多的企业招聘中都会在任职需 ...
【uniapp】3d轮播图/堆叠轮播图/层叠轮播图
前言 uniapp 3d轮播图 uniapp实现3D轮播图从uniapp插件市场下载插件:https://ext.dcloud.net.cn/plugin?id=243#detail 操作步骤导入 ...
uniapp中设置轮播图
实现:在uniapp中设置轮播图先看效果图找不到现成的接口,先在网上找几张图片,为了防链接失效,直接把图片传到文章里,文章在图就在 https://img-blog.csdnimg.cn/img_ ...
模仿最新版爱奇艺卡片式轮播效果CardBannerDemo
本文介绍了一款模仿最新版爱奇艺卡片式轮播lib github地址:https://github.com/xuezj/CardBannerDemo CardBannerDemo 效果图 Attribut ...

uniapp卡片式轮播图

uniapp卡片式轮播图相关推荐

最新文章

热门文章