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轮播效果的更多相关文章

  1. 微信小程序之 3d轮播(swiper来实现)

    以前写过一篇3d轮播,就是这篇,使用的方法比较笨拙,而且代码不简洁.这次发现swiper也能实现同样的效果.故记录一下. 先看看效果: wxml: <swiper previous-margin ...

  2. 小程序实现非swiper组件的自定义伪3D轮播图

    效果如下: 我用了很笨的方法实现的,大致就是: 1.当前点击的div(view)如果前后都有内容,那么,当前div(view)就设置到中间,前一个就设置到左边,前一个的前面所有全部设置到最左边,后面一 ...

  3. jQuery个性化图片轮播效果

    jQuery个性化图片轮播效果 购物产品展示:图片轮播器<效果如下所示> 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果,鼠标划入图片动画停止,划出或离开动画开始 两个区域: ...

  4. CSS3图片轮播效果

    原文:CSS3图片轮播效果 在网页中用到图片轮播效果,单纯的隐藏.显示,那再简单不过了,要有动画效果,如果是自己写的话(不用jquery等),可能要费点时间.css3的出现,让动画变得不再是问题,而且 ...

  5. 超实用的JavaScript代码段 Item3 --图片轮播效果

    图片轮播效果 图片尺寸 统一设置成:490*170px; 一.页面加载.获取整个容器.所有放数字索引的li及放图片列表的ul.定义放定时器的变量.存放当前索引的变量index 二.添加定时器,每隔2秒 ...

  6. 微信小程序 - 3d轮播图组件(基础)

    <!-- 目前仅支持data数据源来自banner,请看测试案例 ################ 以上三种形式轮播: 1. basic 2. 3d 3. book basic即普通轮播 3d即 ...

  7. html中使用JS实现图片轮播效果

    1.首先是效果图,要在网页中实现下图的轮播效果,有四张图片,每张图片有自己的标题,然后还有右下角的小方框,鼠标悬浮在小方框上,会切换到对应的图片中去. 2.先是HTML中的内容,最外层是轮播图整个的容 ...

  8. ios图片轮播效果

    代码地址如下:http://www.demodashi.com/demo/11959.html ImageCarousel 简单封装的图片轮播器 内存过大由于我加载的图片分辨率较高(4k) 文件目录 ...

  9. swiper.js在隐藏/显示切换时,轮播出现bug的解决办法

    swiper在 swiper-container正常状态下显示,轮播是没有问题,但是当 swiper-container由隐藏切换至显示时(比如做图片查看时)会出现滑动bug,滑动卡顿而且最后一张可以 ...

随机推荐

  1. Json-lib 的学习笔记

    json 按照我的理解来说,就是一个字串表,可以用来表示对象的字符串,也可以用来表示数组.它比 xml 文件节省了很多标签的内容. 关于什么是 json,在这里我们就不过多介绍了. Json-lib ...

  2. 修改docker下mysql配置

    1.在/home/smile/docker/mysql/config/目录下增加一个文件 my.cnf # Copyright (c) , Oracle and/or its affiliates. ...

  3. @Aspect 注解切面解析

    注解切面解析 注解切面解析器 /** * 注解切面解析器 */ public class BeanFactoryAspectJAdvisorsBuilder { /** * Bean 工厂 */ pr ...

  4. 2018 icpc 徐州

    A 矩阵树定理可以用于最小生成树计数,最直观的做法就是求个mst,再用矩阵树定理求最小生成树个数,但是n<=1e5,显然不是o(n^3)可以做出来的. 考虑随机数据生成器,固定1e5的边,但是边 ...

  5. java网络通信:同步阻塞式I/O模型(BIO)

    缺点:一个线程只能处理一个客户端连接 服务端: public class TimeServer { public static void main(String[] args) throws IOEx ...

  6. Linux_SystemLogManager

    目录 目录 前言 日志管理journalctl工具 日志服务属性 自定义日志 journalctl 指令 前言 还是RHEL7的新特性,引入了journalctl指令作为系统日志的管理工具. 日志管理 ...

  7. 宝塔面板修改用户名和密码报错:TypeError: cannot concatenate 'str' and 'NoneType' objects

    [root@dapao~]# bt 14 正在执行(14)... ================================================================== ...

  8. wpf 非窗体类中 异步调用窗体与控件

    App.Current.Dispatcher.Invoke((Action)(() => { MessageBoxWindow mwb = ); mwb.ShowDialog(); return ...

  9. $apply()和$digest()——angular

    $apply()和$digest()在AngularJS中是两个核心概念,但是有时候它们又让人困惑.而为了了解AngularJS的工作方式,首先需要了解$apply()和$digest()是如何工作的 ...

  10. Numpy——进阶篇

    impoort numpy as np arr=np.arange(10) #输出奇数 arr[arr%2==1] #将arr中的所有奇数替换为-1,而不改变arr out=np.where(arr% ...