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

Posted 2021-02-14 有点小情绪呀~

官网地址：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("暂无轮播图片");
        }

      }
    })

}


})