微信小程序实现轮播图(适配机型)

微信小程序实现轮播图(适配机型)

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

1、wxss样式:

/* 页面显示图片的框 */ .showTableBox {     position: relative;     width: 100%;     height: 180px;     overflow: hidden; } /* img图片所在的父元素盒子,有几张img,width就设置百分之几百 */ .slideshowImgBox {     position: absolute;     z-index: 1;     width: 500%;     height: 100%; } /* img width设置为: 100% / 图片总数 的百分比 */ .slideshowImgBox image {     width: 20%;     height: 100%;     float: left; } /* 下方小圆点样式*/ .circleBox {     width: 100%;     position: absolute;     bottom: 10px;     justify-content: center; } .circle {     width: 5px;     height: 5px;     border-radius: 50%;     background-color: #F5F5F5;     margin: 0 5px;     z-index: 999; } .circleActive {     background-color: #BF360C; }

其实到这里适配就完成啦,下面是怎么手写一个轮播图哈哈

2、js代码:

page({   data: {         leftNum: 0,//type为number的偏移量,方便计算         imgLeft: "0", //偏移量,         screenWidth: 0, //屏幕width         changCircleIndex: 0, //对应圆球的下标,css根据页面下标显示对应class         slideshowImgs: ["../images/beiJing.webp", "../images/chengDu.webp",             "../images/shangHai.webp", "../images/chongQing.webp", "../images/beiJing.webp"         ], },  onLoad: function (options) {         this.setData({             screenWidth: wx.getSystemInfoSync().windowWidth //获取屏幕宽度         })         this.imageCarousel()     },     imageCarousel: function () {         let imgOverallWidth = this.data.screenWidth * (this.data.slideshowImgs.length - 1)         let timer = setInterval(() => {             this.data.imgLeft = `${this.data.leftNum -= this.data.screenWidth}px`             this.setData({                 imgLeft: this.data.imgLeft,                 changCircleIndex: -(this.data.leftNum / this.data.screenWidth)             })             if (this.data.leftNum === -imgOverallWidth) {                 this.setData({                     changCircleIndex: 0,                     leftNum: 0,                     imgLeft: `${this.data.leftNum}px`                 })             }         }, 3000)     }, })

3、wxml代码:

<view class="photo">     <view class="photoFixedBox">         <view class="showTableBox">             <view class="slideshowImgBox" style="left:{{imgLeft}};"> <!--这里列表渲染的图片一共五张,第一张和最后一张是同一张图,防止轮播时出现白屏 -->                 <image wx:for="{{slideshowImgs}}" src="{{item}}"></image>             </view>             <view class="circleBox flex">         <!-- {{changCircleIndex === index ? 'circleActive' : ''}}"是动态class,根据index来改变圆点颜色  -->                 <view wx:for="{{slideshowImgs.length-1}}" class="circle {{changCircleIndex === index ? 'circleActive' : ''}}"></view>             </view>         </view>         <view class="photoClassifyBigBOx">             <view class="imgClassifyBox flex"  wx:for="{{imgClassify}}"><text>{{item}}</text></view>         </view>     </view> </view>

以上就是整个轮播图的实现啦,圆点的变色显示index根据图片left的偏移量距离来计算:偏移量 / 显示框的宽度,
其实微信小程序有swiper组件,使用也是很方便的。

推荐阅读