官网地址: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("暂无轮播图片"); } } }) } })
原文地址:https://www.cnblogs.com/ttqi/p/10577184.html
时间: 2024-10-05 17:03:06