这篇文章主要介绍了微信小程序swiper左右扩展各显示一半代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
创新互联公司主要从事网站设计制作、成都网站制作、网页设计、企业做网站、公司建网站等业务。立足成都服务莆田,十多年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18982081108
实现如下的功能：
动图展示效果
代码如下:
index.wxml
index.js
Page({
data: {
swiperIndex: 0,
// 设置页面
devices: [
{
deviceImg: "../../img/1.jpg"
},
{
deviceImg: "../../img/2.jpg"
},
{
deviceImg: "../../img/3.jpg"
}
],
},
swiper: function (e) {
let that = this;
let index = e.detail.current;
that.setData({
swiperIndex: index
});
}
})index.wss
/* 轮播图 */
.devices{
width: 638rpx;
}
.swiper{
width: 580rpx;
height: 600rpx;
margin-left:48rpx;
white-space:nowrap;
/* border: solid red 1px; */
}
.device{
width: 410rpx;
height: 94%;
display:inline-block;
margin-left: 20rpx;
background: rosybrown;
transform: scale(0.9);
transition:all .2s ease 0s;
}
.active{
transform: none;
transition: all 0.2s ease-in 0s;
}
.device-img{
width: 100%;
height: 520rpx;
margin-top: 40rpx;
display: flex;
justify-content: center;
align-items: center;
}
.device-img image{
width:350rpx;
height:190rpx;
}index.json
{
"usingComponents": {}
}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持创新互联。