Taro -- Swiper的图片由小变大3d轮播效果
Swiper的图片由小变大3d轮播效果
this.state = ({
nowIdx:,
swiperH:'',
imgList:[
{img:'../../assets/12.jpg'},
{img:'../../assets/23.jpg'},
{img:'../../assets/34.jpg'}
],
})
//获取swiper高度
getHeight = (e) => {
var winWid = Taro.getSystemInfoSync().windowWidth - *;//获取当前屏幕的宽度
var imgh = e.detail.height;//图片高度
var imgw = e.detail.width;//图片宽度
console.log(imgh,imgw);
var sH = winWid * imgh / imgw + "px"
this.setState({
swiperH: sH//设置高度
},()=>{
console.log(this.state.swiperH)
})
}
//swiper滑动事件
swiperChange = (e) => {
this.setState({
nowIdx: e.detail.current
})
}
<Swiper
previousMargin='50px'
nextMargin='50px'
onChange={this.swiperChange}
className='test-h'
circular
interval=''
autoplay>
{this.state.imgList.map((list, index) => {
return <SwiperItem>
<View className='demo-text-1'>
<Image onLoad={this.getHeight} style={`height:${this.state.swiperH}`} className={`swiper-img ${this.state.nowIdx === index ? "swiper-active" : ""}`} src={list.img}></Image>
</View>
</SwiperItem>
})}
</Swiper>
swiper {
padding-top: 30px;
}
.swiper-img {
width: %;
display: block;
transform: scale(0.8);
transition: all .3s ease;
border-radius: 6px;
}
.swiper-img.swiper-active {
transform: scale(); //放大缩放的效果
}
(1) previousMargin 和 nextMargin 表示前边距和后边距
(2) onChange={this.swiperChange} 就是Swiper的切换事件
(4) getHeight 是获取图片的宽高,然后再去设置高度这样才能让图片等比缩放
Taro -- Swiper的图片由小变大3d轮播效果的更多相关文章
- 微信小程序之 3d轮播(swiper来实现)
以前写过一篇3d轮播,就是这篇,使用的方法比较笨拙,而且代码不简洁.这次发现swiper也能实现同样的效果.故记录一下. 先看看效果: wxml: <swiper previous-margin ...
- 小程序实现非swiper组件的自定义伪3D轮播图
效果如下: 我用了很笨的方法实现的,大致就是: 1.当前点击的div(view)如果前后都有内容,那么,当前div(view)就设置到中间,前一个就设置到左边,前一个的前面所有全部设置到最左边,后面一 ...
- jQuery个性化图片轮播效果
jQuery个性化图片轮播效果 购物产品展示:图片轮播器<效果如下所示> 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果,鼠标划入图片动画停止,划出或离开动画开始 两个区域: ...
- CSS3图片轮播效果
原文:CSS3图片轮播效果 在网页中用到图片轮播效果,单纯的隐藏.显示,那再简单不过了,要有动画效果,如果是自己写的话(不用jquery等),可能要费点时间.css3的出现,让动画变得不再是问题,而且 ...
- 超实用的JavaScript代码段 Item3 --图片轮播效果
图片轮播效果 图片尺寸 统一设置成:490*170px; 一.页面加载.获取整个容器.所有放数字索引的li及放图片列表的ul.定义放定时器的变量.存放当前索引的变量index 二.添加定时器,每隔2秒 ...
- 微信小程序 - 3d轮播图组件(基础)
<!-- 目前仅支持data数据源来自banner,请看测试案例 ################ 以上三种形式轮播: 1. basic 2. 3d 3. book basic即普通轮播 3d即 ...
- html中使用JS实现图片轮播效果
1.首先是效果图,要在网页中实现下图的轮播效果,有四张图片,每张图片有自己的标题,然后还有右下角的小方框,鼠标悬浮在小方框上,会切换到对应的图片中去. 2.先是HTML中的内容,最外层是轮播图整个的容 ...
- ios图片轮播效果
代码地址如下:http://www.demodashi.com/demo/11959.html ImageCarousel 简单封装的图片轮播器 内存过大由于我加载的图片分辨率较高(4k) 文件目录 ...
- swiper.js在隐藏/显示切换时,轮播出现bug的解决办法
swiper在 swiper-container正常状态下显示,轮播是没有问题,但是当 swiper-container由隐藏切换至显示时(比如做图片查看时)会出现滑动bug,滑动卡顿而且最后一张可以 ...
随机推荐
- SpringBoot项目的几种创建方式,启动、和访问
最常用的4种方式,但除了这些以外,还有其他方式: ①在线创建 ②STS构建 ③Intell Idea内置构建工具 ④Maven创建 STS官网:https://start.spring.io .S ...
- Spring Data JPA学习笔记
下面先来介绍一下JPA中一些常用的查询操作: //And --- 等价于 SQL 中的 and 关键字,比如 findByHeightAndSex(int height,char sex): publ ...
- 将Windows下的文件同步到Linux下
需求:把Windows下的某些文件自动传送到Linux指定目录下 实现: 1. Windows下安装 WinSCP工具,并把Liunx服务器信息保存 2. 编写脚本,实现双击工具就把Windows下的 ...
- 复选框checked 选中后不显示打钩
复选框checked 选中后不显示打钩 checkbox属性checked="checked"已有,但复选框却不显示打钩的原因 复选框绑定了click事件,点一次选中,再点击取 ...
- 2018-5 - 凉经 - Mozilla Firefox Ltd - 前端工程师
北京谋智火狐信息技术有限公司(北京市东城区建国门华润大厦 17 层)过去面试的时候感觉电梯好神奇啊!一边的电梯是直达 18 层以上的,我按了 18 层准备到了再往下走一层,一个老司机和我说要做另一边的 ...
- eclipse添加约束文件
DTD 类型约束文件 1. Window->Preferences->XML->XML Catalog->User Specified Entries窗口中,选择Add ...
- LeetCode All in One 题目讲解汇总(转...)
终于将LeetCode的免费题刷完了,真是漫长的第一遍啊,估计很多题都忘的差不多了,这次开个题目汇总贴,并附上每道题目的解题连接,方便之后查阅吧~ 如果各位看官们,大神们发现了任何错误,或是代码无法通 ...
- C++/C# 转化 Marshal VS Ptr
Vidyo32.VidyoClientInEventLogin Login = new Vidyo32.VidyoClientInEventLogin(); Login.portalUri = thi ...
- ES快速入门
一.概念 1.ES基础概念 ES是ElasticSearch的缩写.ES是基于Apache Lucene的开源搜索引擎,是一款实时分布式搜索和分析引擎,提供RestfulAPI可以进行可视化的交互.具 ...
- 【Linux开发】【Qt开发】嵌入式Qt程序使用触屏或USB鼠标方式
上文<嵌入式Qt开发-移植到ARM开发板 >介绍了Qt程序的移植,本文再说下如何使开发板Qt程序使用触摸屏或USB方式进行交互. 之前刚把一个qt程序移植到arm板上成功运行显示时就开心的 ...