这篇文章主要介绍了微信小程序偷窃者左右扩展各显示一半代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
实现如下的功能:
动图展示效果
代码如下:
<强> index.wxml
& lt;偷窃者类=巴登哉摺眓ext-margin=' 120 rpx bindchange=巴登哉摺北?
& lt;块wx:="{{设备}}”天气:关键=薄疤炱?项=吧璞浮北?
& lt; swiper-item项id=" {{device.type}}”在
& lt;设备视图类=" {{swiperIndex==指数& # 63;“活跃”:“}}”data-currentTab=皗{指数}}”比;
& lt;视图类=device-img的祝辞
& lt;图像src=" https://www.yisu.com/zixun/{{device.deviceImg}}’祝辞& lt;/image>
& lt;/view>
& lt;/view>
& lt;/swiper-item>
& lt;/block>
& lt;/swiper>
<强> index.js
页面({
数据:{
swiperIndex: 0,//设置页面
设备:[
{
deviceImg:“. ./. ./img/1. jpg”
},
{
deviceImg:“. ./. ./img/2. jpg”
},
{
deviceImg:“. ./. ./img/3. jpg”
}
),
},
偷窃者:函数(e) {
让=这个;
让指数=e.detail.current;
that.setData ({
swiperIndex:指数
});
}
})
<强> index.wss
/*轮播图*/.devices {
宽度:638 rpx;
}
.swiper {
宽度:580 rpx;
身高:600 rpx;
margin-left: 48 rpx;
空白:nowrap;}/*边境:固体红1 px;*/}
.device {
宽度:410 rpx;
高度:94%;
显示:inline-block;
margin-left: 20 rpx;
背景:玫瑰棕色;
变换:规模(0.9);
过渡:所有。2缓解0;
}
.active {
变换:没有;
过渡:所有0.2在0;
}
.device-img {
宽度:100%;
身高:520 rpx;
margin-top: 40 rpx;
显示:flex;
justify-content:中心;
对齐项目:中心;
}
{.device-img形象
宽度:350 rpx;
身高:190 rpx;
}
<强> index.json
{
“usingComponents”: {}
}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
