欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

微信小程序实现banner图轮播效果

程序员文章站 2023-12-09 21:02:33
本文实例为大家分享了微信小程序实现banner图轮播的具体代码,供大家参考,具体内容如下 效果图: indicator-active-color="#007...

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

效果图:

微信小程序实现banner图轮播效果

indicator-active-color="#007aff"//修改选中图片圆点的颜色

js:

const app = getapp()
 
page({
 data: {
 //-----------模拟banner图-----------
 imgurls: [
 '/image/1545118381903.jpg',
 '/image/1545118566631.jpg'
 ],
 circular: true,
 //是否显示画板指示点 
 indicatordots: true,
 //选中点的颜色 
 //是否竖直 
 vertical: false,
 //是否自动切换 
 autoplay: true,
 //自动切换的间隔
 interval: 3000,
 //滑动动画时长毫秒 
 duration: 1000,
 //所有图片的高度 
 imgheights: [],
 //图片宽度 
 imgwidth: 750,
 //默认 
 current: 0
 },
 imageload: function (e) {//获取图片真实宽度 
 var imgwidth = e.detail.width,
 imgheight = e.detail.height,
 //宽高比 
 ratio = imgwidth / imgheight;
 console.log(imgwidth, imgheight)
 //计算的高度值 
 var viewheight = 750 / ratio;
 var imgheight = viewheight;
 var imgheights = this.data.imgheights;
 //把每一张图片的对应的高度记录到数组里 
 imgheights[e.target.dataset.id] = imgheight;
 this.setdata({
 imgheights: imgheights
 })
 },
 bindchange: function (e) {
 // console.log(e.detail.current)
 this.setdata({ current: e.detail.current })
 },
 }
})

wxml:

<!-------------首页轮播图----------------- -->
<view class='swiper'>
 <swiper indicator-dots="{{indicatordots}}" vertical="{{vertical}}" autoplay="{{autoplay}}" duration="{{duration}}" interval='{{interval}}'indicator-active-color="#007aff" bindchange="bindchange" circular="{{circular}}" style="height:{{imgheights[current]}}rpx;">
 <block wx:for='{{imgurls}}' wx:key="{{index}}">
 <swiper-item>
 <image src="{{item}}" data-id='{{index}}' class="slide-image" mode="widthfix" bindload="imageload" />
 </swiper-item>
 </block>
 </swiper>
</view>

wxss:

.swiper image {
 width: 100%;
 height: auto;
}
 
.swiper-image {
 height: 100%;
 width: 100%;
}
 
.slide-image {
 height: 100%;
 width: 100%;
 display: block;
}

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