小程序炫酷轮播图（原生）

一个前端程序猿

于 2023-03-29 10:18:24 发布

阅读量859

点赞数

分类专栏：小程序文章标签：小程序前端微信小程序 javascript

本文链接：https://blog.csdn.net/zhang157111/article/details/129831365

版权

<view class="lunbo">
        <view class='pageBox pageTwo'>
        <swiper class='swiperClass' 
        autoplay="{
  {autoplayl}}"
        indicator-color="#a39f99" 
        indicator-active-color="#f49641" 
        interval="3000" 
        duration="1000" 
        previous-margin="60px" 
        next-margin="60px" 
        circular
        current="{
  {swiperIdx}}"
        bindchange="bindchange" 
        style='height: {
  {swiperHeight}}px'>
        <block wx:for="{
  {imgUrls}}" wx:key="index">
            <swiper-item>
            <view class="outImge" bindtap="goSmallGoodsDetail" data-teacherId="{
  {item.d.shop_id}}">
              <image src="{
  {item.d.img2}}" class="slide-image {
  {swiperIdx == index ? 'active' : 'quiet'}}" mode='aspectFill'></image>
            </view>
            </swiper-item>
        </block>
        </swiper>
        </view>
    </view>
    <!-- 缩略图 -->
    <view class="thumbnail_box">
        <view class="thumbnail " wx:for="{
  {imgUrls}}" wx:key="index">
        <view class="img" bindtap="clickThum" data-index="{
  {index}}">
            <image src="{
  {item.d.img2}}"></image>
            <view class="{
  {swiperIdx==index ? 'active_tum' : 'shadow'}}"></view>
        </view>
    </view>
</view>