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,滑动卡顿而且最后一张可以 ...
随机推荐
- Json-lib 的学习笔记
json 按照我的理解来说,就是一个字串表,可以用来表示对象的字符串,也可以用来表示数组.它比 xml 文件节省了很多标签的内容. 关于什么是 json,在这里我们就不过多介绍了. Json-lib ...
- 修改docker下mysql配置
1.在/home/smile/docker/mysql/config/目录下增加一个文件 my.cnf # Copyright (c) , Oracle and/or its affiliates. ...
- @Aspect 注解切面解析
注解切面解析 注解切面解析器 /** * 注解切面解析器 */ public class BeanFactoryAspectJAdvisorsBuilder { /** * Bean 工厂 */ pr ...
- 2018 icpc 徐州
A 矩阵树定理可以用于最小生成树计数,最直观的做法就是求个mst,再用矩阵树定理求最小生成树个数,但是n<=1e5,显然不是o(n^3)可以做出来的. 考虑随机数据生成器,固定1e5的边,但是边 ...
- java网络通信:同步阻塞式I/O模型(BIO)
缺点:一个线程只能处理一个客户端连接 服务端: public class TimeServer { public static void main(String[] args) throws IOEx ...
- Linux_SystemLogManager
目录 目录 前言 日志管理journalctl工具 日志服务属性 自定义日志 journalctl 指令 前言 还是RHEL7的新特性,引入了journalctl指令作为系统日志的管理工具. 日志管理 ...
- 宝塔面板修改用户名和密码报错:TypeError: cannot concatenate 'str' and 'NoneType' objects
[root@dapao~]# bt 14 正在执行(14)... ================================================================== ...
- wpf 非窗体类中 异步调用窗体与控件
App.Current.Dispatcher.Invoke((Action)(() => { MessageBoxWindow mwb = ); mwb.ShowDialog(); return ...
- $apply()和$digest()——angular
$apply()和$digest()在AngularJS中是两个核心概念,但是有时候它们又让人困惑.而为了了解AngularJS的工作方式,首先需要了解$apply()和$digest()是如何工作的 ...
- Numpy——进阶篇
impoort numpy as np arr=np.arange(10) #输出奇数 arr[arr%2==1] #将arr中的所有奇数替换为-1,而不改变arr out=np.where(arr% ...