微信小程序swiper组件实现图片宽度自适应

it2022-05-06  5

wxml 代码:

<!--pages/swipe/swipe.wxml--> <view> <swiper circular="true" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"> <block wx:for="{{imgUrls}}"> <swiper-item> <image src="{{item}}" style="width: {{imageWidth}}px;" class="slide-image" model="aspectFit" /> </swiper-item> </block> </swiper> </view> model="aspectFit" mode 有 13 种模式,其中 4 种是缩放模式,9 种是裁剪模式。缩放 aspectFit 保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。Js代码: data: { imageWidth: wx.getSystemInfoSync().windowWidth,//图片宽度 indicatorDots:true, autoplay:true, interval: 2000, duration: 1000, imgUrls: [ 'https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=640', 'https://images.unsplash.com/photo-1551214012-84f95e060dee?w=640', 'https://images.unsplash.com/photo-1551446591-142875a901a1?w=640' ], }, wx.getSystemInfoSync().windowWidth 获取屏幕的窗口宽度

 

转载于:https://www.cnblogs.com/guangzhou11/p/11158995.html


最新回复(0)