微信小程序实现带缩略图轮播效果_recatswiper使用两个轮播缩略图资源-CSDN文库

微信小程序

155 浏览量 2020-12-29 15:51:25 上传评论收藏 47KB PDF 举报

资源推荐

资源详情

资源评论

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

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

wxml:

<view id="content">

<view class="recommend">

<view class="swiper-container">

<swiper autoplay="auto" interval="5000" duration="500" current="{{swiperCurrent}}" circular="{{circular}}" bindchange="swiperChange" class="swiper">

<block wx:for="{{slider}}" wx:key="unique">

<swiper-item data-id="{{item.id}}" data-url="{{item.linkUrl}}" class="dot{{index == swiperCurrent ? ' active' : ''}}" bindtap="chuangEvents" id="{{index}}">

<image src="{{item.picUrl}}" class="img"></image>

<span>{{item.index+1}}</span>

</swiper-item>

</block>

</swiper>

<view class="dots">

<swiper autoplay="auto" interval="5000" display-multiple-items="7" duration="500" current="{{dotsCurrent}}" circular="{{circular}}"

bindchange="dotsChange">

<block wx:for="{{slider}}" wx:key="unique">

<swiper-item data-id="{{item.id}}" class="dot{{index == swiperCurrent ? ' active' : ''}}" bindtap="chuangEvent" id="{{index}}">

<image src="{{item.picUrl}}" class="imgs"></image>

</swiper-item>

</block>

</swiper>

</view>

</view>

</view>

</view>

wxss:

/* pages/shouye/shouye.wxss */

page {

background: #333;

width: 100%;

height: 100%;

overflow: hidden;

}

#content {

background: #333;

width: 100%;

height: 100%;

overflow: hidden;

}

a {

width: 100%;

height: 50px;

overflow: hidden;

}

/*banner轮播 */

.swiper-container {

margin-top: 23%;

position: relative;

}

.swiper-container .swiper {

height: 600rpx;

}

.swiper-container .swiper .img {

width: 100%;

height: 100%;

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余3页未读，立即下载

内容反馈

weixin_38691256

粉丝: 3
资源: 945

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip