小程序模拟淘宝京东商品轮播滑动展示功能模块

小程序模拟淘宝京东商品轮播滑动展示功能模块

多话不说直接上传代码

一、wxml代码模块如下：

<!--轮播图-->
<swiper autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="true" bindchange="swiperChange" current="{{swiperCurrent}}">
  <block wx:for="{{imgUrls}}" wx:key="{{index}}">
    <swiper-item>
      <image src="{{item}}" data-index="{{index}}" class="slide-image" />
    </swiper-item>
  </block>
</swiper>

<!--  实现点击选中样式  -->
<!-- <scroll-view scroll-x="true"> -->
<view class="dots">
  <block wx:for="{{imgUrls}}" wx:for-index="index" wx:key>
    <view class="dot{{index == swiperCurrent ? ' active' : ''}}" bindtap="chuangEvent" id="{{index}}">
      <image src="{{item}}" />
    </view>
  </block>
</view>
<!-- </scroll-view> -->

二、css样式模块

/*轮播图*/

swiper {
  height: 360rpx;
  width: 750rpx;
}

.slide-image {
  width: 100%;
  height: 360rpx;
}

/*滚动条*/

.dots{
  display: flex;
  white-space: nowrap;
  background-color: #fff;
}
.dot{
  width: 300rpx;
  height: 100rpx;
  display: inline-block;
  margin: 20rpx;
  border: 1px solid rgba(169, 169, 169, 0.507);
}
.dot image{
  width: 100%;
  height: 100%;
  display: block;
}
.active{
  height: 120rpx;
}

三、js代码模块

data: {
    /*轮播图数据*/
    imgUrls: [
      '/images/xiangqing/1.png',
      '/images/xiangqing/2.png',
      '/images/xiangqing/3.png',
      '/images/xiangqing/4.png'
    ],
    swiperCurrent: 0,//默认显示第一个
    autoplay: true,//自动轮播
    interval: 3000,
    duration: 1500,
  },
  
  //轮播图的切换事件  
  swiperChange: function (e) {
    var that = this;
    that.setData({
      swiperCurrent: e.detail.current   //获取当前轮播图片的下标
    })
  },
  //点击指示点切换  
  chuangEvent: function (e) {
    var that = this;
    that.setData({
      swiperCurrent: e.currentTarget.id
    })
  },

还是那句话，希望对你们有所帮助，如有疑问，欢迎留言，我会及时回复的！希望大家一起探讨，共同进步！！！