微信小程序如何实现一个swiper-创新互联

这篇文章主要介绍了微信小程序如何实现一个swiper,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

成都创新互联公司专注于中大型企业的网站制作、成都网站建设和网站改版、网站营销服务,追求商业策划与数据分析、创意艺术与技术开发的融合,累计客户上千余家,服务满意度达97%。帮助广大客户顺利对接上互联网浪潮,准确优选出符合自己需要的互联网运用,我们将一直专注品牌网站制作和互联网程序开发,在前进的路上,与客户一起成长!

HTML


   
    
       
            

css

.swiper-block {
 height: 320rpx;
 width: 100%;
}
 
.swiper-item {
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 overflow: unset;
 text-align: center;
}
 
.slide-image {
 height: 230rpx;
 width: 526rpx;
 border-radius: 10rpx;
 box-shadow: 0px 3px 10px 0px rgba(51, 51, 51, 0.3);
 margin: 0 rpx 30rpx;
 z-index: 1;
}
 
.active {
 transform: scale(1.21);
 transition: all 0.2s ease-in 0s;
 z-index: 20;
}

js

swiperChange(e) {
 const that = this;
 that.setData({
  swiperIndex: e.detail.current,
 })
},

感谢你能够认真阅读完这篇文章,希望小编分享的“微信小程序如何实现一个swiper”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!


分享标题:微信小程序如何实现一个swiper-创新互联
文章出自:http://scyanting.com/article/djhgje.html