微信小程序轮播图组件 swiper,swiper-item及轮播图片自适应

时间:2024-10-08 20:34:44

官网地址:https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

index.wxml文件

indicator-dots:是否显示面板指示点
autoplay:是否自动切换
interval:自动切换时间间隔
circular:是否采用衔接滑动
duration:滑动动画时长

更多属性请查看官网
 <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" circular="{{circular}}" duration="{{duration}}" class='hlzbsp'>
<block wx:for="{{phonelist}}" wx:for-item="item" wx:for-index="idx">
<swiper-item>
<image src="{{item.phoneurl}}" style='position: absolute;width:{{item.phoneWidth}}rpx; height:{{item.phoneheight}}rpx; top:{{item.top}}rpx; left: {{item.left}} rpx;' mode="aspectFit"></image>
</swiper-item>
</block>
</swiper>

mode:图片缩放方式,如果不设置改属性,样式可能失效

mode相关属性官网:https://developers.weixin.qq.com/miniprogram/dev/component/image.html

index.js文件

const app = getApp()
Page({
  data: {
phonelist:[], //轮播图片列表
indicatorDots: true,//是否显示面板指示点
autoplay: true,//是否自动切换
circular:true,//是否采用衔接滑动
interval: 3000,//自动切换时间间隔
duration: 1000,//滑动动画时长
}, phone:function(){
//这里采用动态获取照片
wx.request({
url: '后台访问地址',
header: {
//设置参数内容类型为x-www-form-urlencoded
'content-type': 'application/x-www-form-urlencoded'
},
method: 'GET',
success: function (res) {
var list=[];//定义临时数组
var phonecomment={};//定义临时对象
//res.data.data.lsit是从后台拿到的数据,可根据后台传参获取 格式:[{id:1,photoDetails:aaa.jsp},{id:2,photoDetails:bbb.jsp},{id:3,photoDetails:ccc.jsp}]
if (res.data.data.lsit.length>0){
for (var i = 0; i < res.data.data.lsit.length; i++) {
phonecomment={};//将临时对象赋值空
phonecomment.phoneurl = res.data.data.lsit[i].photoDetails;//保存图片地址
       //官方接口 获取图片信息
wx.getImageInfo({
src: res.data.data.lsit[i].photoDetails,//图片地址
success: function (phone) {
var originalWidth = phone.width;//返回该图片的宽
var originalHeight = phone.height;//返回该图片的高 var minwidth =670 /originalWidth;//670为轮播框的宽,670/originalWidth 是轮播框宽与图片宽比例
var minheight = 380 / originalHeight;//380为轮播框的高 380/originalHeight 是轮播框高与图片高比例
if (minwidth >= minheight){
phonecomment.phoneheight = originalHeight * minheight;//图片需要设置的高
phonecomment.phoneWidth = originalWidth * minheight;//图片需要设置的宽
phonecomment.top = (380 - originalHeight * minheight) / 2;//图片距离轮播框顶部的距离
phonecomment.left = (670 - originalWidth * minheight) / 2;//图片距离轮播框左边的距离
//phonecomment.top phonecomment.left作用:图片居中
}else{
phonecomment.phoneheight = originalHeight * minwidth;
phonecomment.phoneWidth =originalWidth * minwidth;
phonecomment.top = (380 - originalHeight * minwidth) / 2;
phonecomment.left=(670 - originalWidth * minwidth) / 2;
}
},
fail: function (res) {
console.log("获取图片高宽失败");
},
})
list.push(phonecomment);//将临时对象存放到临时数组中 }
console.log(list);
that.setData({
phonelist: list //赋值
}); console.log(list);
}else{
console.log("暂无轮播图片");
} }
}) } })