微信小程序輪播圖組件 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("暫無輪播圖片"); } } }) } })

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM