微信小程序轮播图片自适应[通俗易懂]

全栈程序员站长

发布于 2022-08-25 21:34:39

9450

发布于 2022-08-25 21:34:39

大家好，又见面了，我是你们的朋友全栈君。

微信 小程序轮播图片自适应

//xml代码
<view class="rotation">
  <swiper class="home-swiper" 
  bindchange="bindchange"
  style="height:{ 
   {imgheights[current]}}rpx;">
    <block wx:for-items="{ 
   {lunboData}}" wx:key="{ 
   {index}}">
      <swiper-item>
        <image data-id="{ 
   {index}}" mode="widthFix" src="{ 
   {item.imgurl}}" class="slide-image" bindload="imageLoad"/>
      </swiper-item>
    </block>
  </swiper>
</view>


//js代码
Page({ 
   
	data: { 
   
		//图片数组
		lunboData:[{ 
   "id": 1,"imgurl": "https://img0.baidu.com/it/u=1271409927,137799855&fm=26&fmt=auto&gp=0.jpg"},{ 
   "id": 2,"imgurl": "https://img0.baidu.com/it/u=1611101153,494459479&fm=26&fmt=auto&gp=0.jpg"},{ 
   "id": 3,"imgurl": "https://img1.baidu.com/it/u=3847739212,936584275&fm=26&fmt=auto&gp=0.jpg"},{ 
   "id": 4,"imgurl": "https://img2.baidu.com/it/u=3808973942,1442731276&fm=224&fmt=auto&gp=0.jpg"}],
	    //所有图片的高度 
	    imgheights: [],
	    //图片宽度 
	    imgwidth: 750,
	    //默认 
	    current:0,
	}
})


//wxss代码
.slide-image { 
   
  width: 100%;
  height: 100%;
}