微信小程序实现小边大中间轮播效果示例代码

我很久没和新博客聊过了。今天没有什么可以记录我的成绩，哈哈哈

今天产品小姐过来让我改改产品活动页面的样式。我看了一下，发现有一种旋转木马的风格，两边小中间大。之前没写过，觉得用小程序实现应该不是很简单。我想录下来。事实上，它没有我想象的那么难

applet有一个组件，一个可以直接使用的转盘组件，它提供了两个非常实用的属性

这可以帮助实现在两侧显示一些图片信息的功能

我的主要想法是给一个标志。滑动到某个画面时，让其风格处于大画面状态。他的上一张缩小了，出现在左边。下一个缩小了，出现在右边。所以我说循环图片数据被改成了这个

imgurls : [{ URL : ' http://img 02 . tooopen.com/images/20150928/tooopen _ sy _ 143912755726 . jpg '，isChange:1，}，{ URL : ' http://img 06 . tooopen.com/images/20160818/tooopen _ sy _ 1758666 . 1666666666

页面代码

swiper指示器-dots=' { { false } } ' autoplay=' { { false } } ' previous-margin=' 80 rpx ' next-margin=' 80 rpx ' bind change=' Swipercrange ' block wx : for=' { { imgUrls } } ' wx : for-item=' item ' wx : key=' ' swiper-item view class=' shuffing-item { { item . is range=' 2 ' 'shuffing-item-next ' : item . iscange==0 'shuffling-item-preo ' : ' ' } ' image src=' http 3360 { { item . URL } } '/imageview class=' shuffling-mask ' text打开不朽童话/text text/text/view/view/wiper-item/block/wiper样式代码

swiper { height:520rpxmargin:20rpx 30rpx} .shuff ing { text-align : center；宽度：100%；相对位置：}.shuff ing-item { position : absolute；宽度：100%；左侧：50%；top :50%；transform : translateX(-50%)translateY(-50%)；height:520rpxtransition:全部0.3s}.shuffing-item-next { width :85%；高度：85%；transform : translatex(-100%)translateY(-50%)；transition:全部0.3s}.shuffing-item-preo { width :85%；高度：85%；transform : translatex(40%)translateY(-50%)；transition:全部0.3s}.shuffing-item image { width :100%；高度：100%；}.shuffing-mask { position : absolute；bottom : 0；宽度：100%；线高： 60 rpx；background: rgba(0，0，0，0.6)；color: # fffdisplay: flexjustice-content :空格；padding:0 20rpx}我感觉这个小程序有一个swiper组件，实现起来相当简单，没有我一开始想的那么难。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。