定制卡牌式 banner
- HTML
<template>
<view >
<swiper class='swiperClass' autoplay interval="2000"
duration="1000" previous-margin="60px" next-margin="60px" circular @change="onSwiperChange">
<!-- indicator-color="#a39f99" indicator-active-color="#f49641" indicator-dots -->
<block v-for="(banner,index) in bannerUrls">
<swiper-item class="swiperItem" >
<image :src="banner.imgUrl" class="slide-image" :class="[swiperIndex == index ? 'active' : 'quiet']" ></image>
</swiper-item>
</block>
</swiper>
<view class="bottomLine">
<view v-for="(item,index) in bannerUrls" class="point" :style="{backgroundColor:swiperIndex==index ? '#FF2F2F' : '#C4C8CC'}"></view>
</view>
</view>
</template>
- JS
<script>
export default {
data() {
return {
// 轮播
bannerUrls: [
{
imgUrl: '/static/img/banner/banner1.jpeg',
},
{
imgUrl: '/static/img/banner/banner2.jpeg',
},
{
imgUrl: '/static/img/banner/banner3.jpeg',
},
{
imgUrl: '/static/img/banner/banner4.jpeg',
},
{
imgUrl: '/static/img/banner/banner5.jpeg',
},
],
swiperIndex:0,
};
},
methods: {
onSwiperChange: function(e){
this.swiperIndex = e.detail.current;
},
}
};
</script>
- CSS
.swiperClass {
width: 750upx;height: 500px;
margin-top: 30px;
}
.slide-image{
height: 100%;width: 350px;
border-radius: 10px;
}
image.active {
transform: none;
transition: all 0.2s ease-in 0s;
}
image.quiet {
transform: scale(0.87);
transition: all 0.2s ease-in 0s;
}
.bottomLine{
width: 750upx; height:30px;flex-direction: row;
align-items: center;justify-content: center;
margin-top: 20px; display: flex;
}
.point{
width: 10px;height: 10px;
background-color: #007AFF;
border-radius: 5px;
margin-left: 24px;
}
定制卡牌式 banner的更多相关文章
- TCG卡牌游戏研究:《炉石战记:魔兽英雄传》所做的改变
转自:http://www.gameres.com/665306.html TCG演进史 说到卡牌游戏,大家会联想到什么呢? 是历史悠久的扑克牌.风靡全球的<MTG 魔法风云会>与< ...
- 「Unity卡牌自走棋」项目NABCD分析
项目 内容 这个作业属于哪个课程 2021学年春季软件工程(罗杰 任健) 这个作业的要求在哪里 团队项目-初次邂逅,需求分析 在这个课程的目标是 锻炼在大规模开发中的团队协作能力 这个作业在哪个具体方 ...
- BZOJ 4205: 卡牌配对
4205: 卡牌配对 Time Limit: 20 Sec Memory Limit: 512 MBSubmit: 173 Solved: 76[Submit][Status][Discuss] ...
- 使用UIKit制作卡牌游戏(三)ios游戏篇
译者: Lao Jiang | 原文作者: Matthijs Hollemans写于2012/07/13 转自朋友Tommy 的翻译,自己只翻译了这第三篇教程. 原文地址: http://www.ra ...
- CCOrbitCamera卡牌翻转效果
static CCOrbitCamera* create(float t, float radius, float deltaRadius, float angleZ, float deltaAngl ...
- [Firefly引擎][学习笔记二][已完结]卡牌游戏开发模型的设计
源地址:http://bbs.9miao.com/thread-44603-1-1.html 在此补充一下Socket的验证机制:socket登陆验证.会采用session会话超时的机制做心跳接口验证 ...
- JLOI 2013 卡牌游戏
问题描述: N个人坐成一圈玩游戏.一开始我们把所有玩家按顺时针从1到N编号.首先第一回合是玩家1作为庄家.每个回合庄家都会随机(即按相等的概率)从卡牌堆里选择一张卡片,假设卡片上的数字为X,则庄家首先 ...
- cocos2d-x 卡牌翻牌效果的实现
转自:http://blog.csdn.net/yanghuiliu/article/details/9115833 这个能实现翻牌的action就是CCOrbitCamera. static CCO ...
- [JLOI2013]卡牌游戏
[题目描述 Description] N个人坐成一圈玩游戏.一开始我们把所有玩家按顺时针从1到N编号.首先第一回合是玩家1作为庄家.每个回合庄家都会随机(即按相等的概率)从卡牌堆里选择一张卡片,假设卡 ...
随机推荐
- jq计算总时长
1: <style> .item { width: 500px; height: 50px; margin: 0 auto; text-align: center; font-size: ...
- LGP3813题解
这道题是我去年11月份的时候看到的,当时写了一个假的做法没过样例,然后就没管了. 结果今天在模拟赛的时候放到了 T1( 我也不知道他为什么是对的,可是他就是过了样例和大样例.jpg 容易发现 \(n\ ...
- topk 问题的解决方法和分析
1.全排序方法 class Solution: def kClosest(self, points, K): points.sort(key= lambda x: x[0]**2 + x[1]**2) ...
- Mybatis使用注解开发(未完)
使用注解来映射简单语句会使代码显得更加简洁,但对于稍微复杂一点的语句,Java 注解不仅力不从心 注解在接口实现 @Select("SELECT * FROM user") Lis ...
- 『现学现忘』Docker基础 — 30、Docker中数据卷相关命令
目录 1.Volume命令说明 2.Volume命令的使用 (1)创建数据卷 (2)查看本地数据卷列表 (3)打印myVolume数据卷的详细信息 (4)删除数据卷 (5)删除所有未使用的数据卷 3. ...
- NoSQL:Redis缓存、雪崩、击穿、穿透
Redis介绍 Redis(Remote Dictionary Server ),即远程字典服务,是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库 ...
- SWAKS伪造邮件发送
一.SWAKS介绍 swaks(SWiss Army Knife Smtp)SMTP瑞士军刀Swaks是由John Jetmore编写和维护的一种功能强大,灵活,可脚本化,面向事务的SMTP测试工具. ...
- python练习册 每天一个小程序 第0001题
1 # -*-coding:utf-8-*- 2 __author__ = 'Deen' 3 ''' 4 题目描述: 5 做为 Apple Store App 独立开发者,你要搞限时促销,为你的应用生 ...
- 企业应用架构研究系列二:MSF&Scrum 项目管理
从业软件项目这么多年,在企业应用开发项目中,项目能否成功,是否能按照项目计划有效的推进,是有很强的一套项目管理理论.最早的时候,接触的项目管理的方法论就是微软的MSF(Microsoft Soluti ...
- Java study 4
JAVA 学习第四天 今日学习内容 快捷键.复习.注释.字面量 快捷键 学习地址:IJ快捷键 复习 jdk下载.安装.部署环境.第一个Java程序入门学习,环境变量path 注释 注释:顾名思义就是用 ...