微信轮播图自适应高度

喜欢ヅ旅行 2022-12-28 04:19 138阅读 0赞

###### 原理: 原图宽/原图高 = 屏幕宽/适应屏幕宽后的图片高 ######

##### wxml #####

<swiper style="height:{
       {imgh==0?200:imgh}}" indicator-dots="{
       {indicatorDots}}" autoplay="true" interval="{
       {interval}}" duration="{
       {duration}}">
    		<block wx:for="{
       {图片数组***》》此处替换}}" wx:key="*this">
    			<swiper-item>
    				<image bindload="imageload2" style="height:{
       {imgh==0?200:imgh}}" bindtap="toApplyBrand" src="{
       {URL图片路径》》》*此处替换}}"></image>
    			</swiper-item>
    		</block>
    	</swiper>

##### JS #####

Page({
    
      data: {
        imgh:'',
         indicatorDots: true,
        vertical: false,
        autoplay: false,
        interval: 2000,
        duration: 500,
        }，
      imageload2: function (e) {//获取图的高度
        let swiperHeight = this.data.imgh;
        let imgWidth = e.detail.width; //获取图片原始宽度
        let imgHeight = e.detail.height; //图片原始高度
        var width = wx.getSystemInfoSync().windowWidth;
        //获取可使用窗口宽度
        console.log('可用窗口 高度-->',width);
            swiperHeight = width * imgHeight / imgWidth ;
            console.log("swiperHeight", swiperHeight)
            this.setData({
              imgh: swiperHeight+'px'
            })
      },
      }）

发表评论取消回复

表情：

评论列表（有 0 条评论，138人围观）

还没有评论，来说两句吧...

相关阅读

相关微信小程序轮播图代码

微信小程序轮播图的代码如下：首先，在小程序的 wxml 文件中，添加如下代码：  <swiper class="swiper"

深藏阁楼爱情的钟/ 2024年03月27日 12:20/ 0 赞/ 79 阅读

相关微信小程序界面开发-自适应轮播图

一、wxml文件\` <swiper autoplay="true" indicator-dots="true" > <swiper-item wx:for="{ {

雨点打透心脏的1/2处/ 2023年06月16日 10:50/ 0 赞/ 8 阅读

相关微信小程序：轮播图

> 基础知识： > > swiper标签存在默认的宽度和高度：100% \ 150px > > `swiper` 高度无法实现由内容撑开 > > 先找出来

我不是女神ヾ/ 2023年02月19日 10:25/ 0 赞/ 13 阅读

相关微信轮播图自适应高度

原理: 原图宽/原图高 = 屏幕宽/适应屏幕宽后的图片高 wxml <swiper style="height:{ {imgh==0?200:

喜欢ヅ旅行/ 2022年12月28日 04:19/ 0 赞/ 139 阅读

相关 layui框架轮播图实现轮播图片自适应视口缩放

一点JS也不懂，利用layui现成的框架轮播组件，简单的实现了layui框架轮播图自适应视口而缩放效果。以下是代码： <section>

柔光的暖阳◎/ 2022年12月03日 08:54/ 0 赞/ 231 阅读

相关用原生js实现轮播图自适应

一些说明这是我根据网上的一位大牛分享的代码进行了一些改动，这是大牛的分享：[http://www.cnblogs.com/LIUYANZUO/p/5679753.htm

﹏ヽ暗。殇╰゛Y/ 2022年03月10日 14:07/ 0 赞/ 219 阅读

相关微信小程序之自定义轮播图实例

业务需求： 5个图片轮番播放，可以左右滑动，点击指示点可以切换图片重点说明：由于微信小程序，整个项目编译后的大小不能超过1M ![在这里插入图片描述][2

朴灿烈づ我的快乐病毒、/ 2022年01月29日 05:19/ 0 赞/ 180 阅读

相关微信小程序swiper轮播图高度自适应

说明：swiper默认高度150px，且无法更改。解决办法： wxml中：注意 style=‘height:\{ \{Height\}\}’、mode="widthFi

痛定思痛。/ 2022年01月20日 15:07/ 0 赞/ 442 阅读

相关小百度小程序轮播图高度自适应

index.swan部分代码 <swiper indicator-dots="true" autoplay="true" style="height:{

迷南。/ 2021年11月04日 15:52/ 0 赞/ 412 阅读

相关微信小程序之首页轮播图片自适应高度

目录一、GitHub 源码下载链接二、代码解析三、福利：视频资源分享四、同类文章推荐： -------------------- 注意！！！轮播的图片需要同

缺乏、安全感/ 2021年09月15日 12:58/ 0 赞/ 410 阅读