微信小程序实现带缩略图轮播效果

本文实例为大家分享了微信小程序实现实现轮播效果展示的具体代码，供大家参考，具体内容如下

wxml:

视图id='content '！-banner-view class=' recommend ' view class=' swiper-container ' swiper autoplay=' auto ' interval=' 5000 ' duration=' 500 ' current=' { { swiperCurrent } } ' circular=' { { circular } } ' bind change=' Swiprenge ' class=' swiper ' block wx : for=' { { slider } } ' wx : key=' unique ' swiper-item data-id=' { { item。id } } '数据-URL=' { { 0 }活动' : ''}}' bindtap='创事件id=' { { index } } ' image src=' http : { { item }。picurl } } ' class=' img '/image span { { item }。索引{ 1 } }/span/swiper-item/block/swiper view class=' dots ' swiper autoplay=' auto ' interval=' 5000 ' display-multi-items=' 7 ' duration=' 500 ' current=' { { dotsCurrent } } } active ' : ' ' } } ' bind tap='创事件id=' { { index } } ' image src=' http : { { item }。picurl } } ' class=' imgs '/image/swiper-item/block/swiper/view/view/view XSS 3360

/*页数/shoye/shoye。wxss */page { background : # 333；宽度： 100%;高度： 100%;飞越：隐藏；} #内容{ background: # 333宽度： 100%;高度： 100%;飞越：隐藏；} a {宽度： 100%；高度： 50px飞越：隐藏；}/*横幅轮播*/.swiper-container { margin-top : 23%；相对位置：} .瑞士集装箱swiper { height: 600rpx}。瑞士集装箱。斯威珀img { width : 100%；高度： 100%;} .瑞士集装箱。点{位置：固定；高度： 80px右： 0rpx宽度： 100%;bottom: 0rpx}。瑞士集装箱。圆点dot {/* margin : auto 3px；*///*宽度： 58px！重要；*/height: 65px！重要；/*背景： # 333；*//*公交：全0.6s*/} .瑞士集装箱。圆点。圆点。激活imgs { width: 100%！重要；高度： 100%;保证金： 0%自动；} .imgs { width : 85%；显示器：块；保证金： 5%自动；高度： 90%;} .瑞士集装箱。宠爱{ position : absolute eright : 40 rpxbottom : 20 rpxdisplay : flex justice-content center :} .瑞士集装箱。溺爱dote { margin: 0 10rpx宽度： 28 rpx高度： 28rpx背景# fff边界半径： 50%;过渡：全0.6s font : 300 18 rpx/28 rpx ' Microsoft ya hei '；文本对齐：中心；} .瑞士集装箱溺爱。溺爱。激活{ background : # f80color: # fff}js

//bannerPage({ data: { //轮播图slide :[]，swiperCurrent: 3，slide :[{ URL : ' '，picur : ' images/1。jpg ' }，{ picur : ' images/5。jpg ' }，{ picur : ' images/3。jpg ' }，{ picur : ' images/4。jpg ' }，{ picur : ' images/5。jpg ' }，picur指示点颜色afterColor: 'coral '，//当前选中的指示点颜色}, //轮播图的切换事件瑞士：函数(e) { //只要把切换后当前的指数传给捣蛋鬼组件的目前的属性即可这个。setdata({ swipercurrent : e . detail。当前})}，dotsChange:函数(e) { //只要把切换后当前的指数传给捣蛋鬼组件的目前的属性即可这个。setdata({ dot sorrent : e . detail。当前})}，//点击指示点切换创事件：函数{这个。setdata({ swipercurrent : e .当前目标。id })}，创事件3360函数{这个。setdata({ dotstorrent : e .当前目标。id })}，})效果图：

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