微信小程序实现一个简单swiper代码实例

微信(小程序)  /  管理员 发布于 4年前   370

这篇文章主要介绍了微信小程序实现一个简单swiper代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

话不多说，上截图

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轮播图效果
• 微信小程序实现3D轮播图效果（非swiper组件）
• 微信小程序利用swiper+css实现购物车商品删除功能
• 微信小程序实现swiper切换卡内嵌滚动条不显示的方法示例
• 微信小程序实现的3d轮播图效果示例【基于swiper组件】
• 微信小程序使用swiper组件实现类3D轮播图
• 微信小程序实现tab和swiper切换结合效果
• 微信小程序实现顶部选项卡(swiper)
• 微信小程序 swiper制作tab切换实现附源码