微信小程序輪播圖組件 swiper，swiper-item及輪播圖片自適應

官網地址：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("暫無輪播圖片");
        }

      }
    })

}


})