微信小程序-实现旋转木马轮播功能

23天前    标签:微信小程序    阅读:79    评论:0


效果图:

GIF.gif

技术要点:

自动滚动+手动拖拽 (原生组件帮我们完成 Property:autoplay) 

面板指示点 (原生组件帮我们完成 Property:indicator-dots) 

左右可以露出非Active状态图的边缘(即Quiet状态, 后文class会以这两个名字定义) (原生组件帮我们完成 Property:previous-margin、next-margin)

 图片滚动到中心位置放大,滚动出去缩小 (我们手写实现,利用技术点中提到的滚动回调+条件渲染。其中滚动回调用 Property:bindchange)

.wxml 代码:

<!-- 轮播 -->
<view class="lunbo">
<swiper class='swiperClass' autoplay interval="3000" indicator-color="#a39f99" indicator-active-color="#f49641" indicator-dots  duration="1000" previous-margin="30rpx" next-margin="30rpx" circular bindchange="bindchange" style='height: {{swiperHeight}}rpx'>
<block wx:for="{{imgUrls}}" wx:key="{{index}}">
<swiper-item>
<image src="{{item}}" class="slide-image {{swiperIndex == index ? 'active' : 'quiet'}}" mode='aspectFill'>
</image>
</swiper-item>
</block>
</swiper>
</view>
<!-- 轮播 -->

.js 代码:

Page({
data: {
statusBarHeight: app.globalData.statusBarHeight,
imgUrls: [
'/pages/asset/images/index_03.jpg',
'/pages/asset/images/index_03.jpg',
'/pages/asset/images/index_03.jpg',
'/pages/asset/images/index_03.jpg'
],
indicatorDots: false,
swiperIndex: 0, //这里不写第一次启动展示的时候会有问题 
swiperCurrent: 0,
interval: 3000,
},

.wxss代码:

.lunbo{ width: 100%; float: left; margin-top:27rpx;}
.swiperClass {
margin: 0;
}

.slide-image {
width: 100%; 
height: 100%;
border-radius: 10px;
position: relative;
}

image.active {
transform: none;
transition: all 0.2s ease-in 0s;
} 

image.quiet {
transform: scale(0.95333333);
transition: all 0.2s ease-in 0s;
}


热门云产品限量特惠秒杀,云服务器1核2G,99元/1年

‘简忆博客’微信公众号 扫码关注‘简忆博客’微信公众号,获取最新文章动态
转载:请说明文章出处“来源简忆博客”。http://www.tpxhm.com/adetail/256.html

×
觉得文章有用就打赏一下文章作者
微信扫一扫打赏 微信扫一扫打赏
支付宝扫一扫打赏 支付宝扫一扫打赏

文章评论(0)

登录

博主信息

头像

今天努力一点,知识一点点积累,谢谢那个曾经努力的自己!

职业:Web工程师

Email:2938039696@qq.com

学习交流群:简忆blogs技术群

项目合作:2938039696

置顶推荐

站点信息

952运行天数

303文章数量

主题框架:Foundation5
网站地图:XML网站地图
微信公众号:扫码关注公众号
公众号

打赏本站

如果你觉得本站很棒,可以通过扫码支付打赏哦!
微信扫码:你说多少就多少~
微信扫码
支付宝扫码:你说多少就多少~
支付宝扫码
×
×
×