最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
微信小程序如何实现一个简单swiper 微信小程序实现一个简单swiper代码实例
时间:2019-12-30 编辑:袖梨 来源:一聚教程网
本篇文章小编给大家分享一下微信小程序实现一个简单swiper代码实例,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看。
截图
HTML
.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, }) },
相关文章
- 微信小程序实现点击生成随机验证码示例代码 09-09
- 微信小程序如何创建投票活动 微信小程序创建投票活动方法 08-04
- 微信小程序如何实现列表的横向滑动方式 微信小程序实现列表的横向滑动方式代码 07-15
- 微信小程序如何实现watch监听 微信小程序实现watch监听代码示例 06-04
- 微信小程序加载数据库真实数据实现代码 03-05
- 微信小程序利用for循环解决内容变更问题代码 03-05