介绍 & lt; swiper 以前=& # 39;50 px # 39;, next-margin=& # 39; 50 px # 39;, bindchange=皊wiperChange",风格=& # 39;高度:{{swiperH}}; & # 39;比;
& lt;才能swiper-item 天气:=& # 39;{{imgList}} & # 39;,天气:关键=& # 39;& # 39;比;
,,,& lt; image 类=& # 39;le-img {{nowIdx==指数?“le-active":““}} & # 39;, bindload=& # 39;获得# 39;,src=https://www.yisu.com/zixun/{{项}}的风格=案叨?{{swiperH}};”>
swiper {
,padding-top: 30 px;
}
.le-img {
,宽度:100%;
,显示:块;
,变换:规模(0.8);
,转型:all 0.3 s 缓解;
,这个特性:6 px;
}
.le-img.le-active {
规模,变换:(1);
} 数据:,{
swiperH才能:& # 39;& # 39;//偷窃者高度
nowIdx才能:0,//当前偷窃者索引
imgList才能:[//图片列表
,,,,/公共/img/idx-ad.png"
,,,,/公共/img/idx-ad.png"
,,,,/公共/img/idx-ad.png"
,,)
},//获取偷窃者高度
获得:函数(e) {
var 才能;winWid =, wx.getSystemInfoSync () .windowWidth 作用;2 * 50;//获取当前屏幕的宽度
var 才能;imgh =, e.detail.height;//图片高度
var 才能;imgw =, e.detail.width;
var 才能;sH =, winWid *, imgh /, imgw +,“px"
this.setData({才能
,,,swiperH:, sH//设置高度
})才能
},//偷窃者滑动事件
swiperChange:函数(e) {
this.setData({才能
,,,nowIdx: e.detail.current
})才能
},
这篇文章将为大家详细讲解有关怎么在微信小程序中实现一个3 d轮播图效果,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。
wxml:
(1)以前和next-margin表示前边距和后边距,官网文档有说明的。
(2) <代码> swiperChange>
(3) <代码>风格=& # 39;高度:{{swiperH}} & # 39; ,这是等比设置偷窃者高度,因为偷窃者有固定的高度,所以要动态修改一下。这篇文章也有类似的做法
(4)获得是获取图片的宽高,然后再去设置高度这样才能让图片等比缩放
wxs:
(1)最主要的就是规模这个属性了,有了这个属性才能有第二张图片缩放的效果。
js:
关于怎么在微信小程序中实现一个3 d轮播图效果就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看的到。
