微信小程序轮播图image控件图片mode属性自适应及解决图片加载闪烁bug

简介: 微信小程序轮播图image控件图片mode属性自适应及解决图片加载闪烁bug

微信小程序image控件图片自适应

简述

我是做的轮播图,swiper标签存在默认样式 width 100% ;height 150px;这就会造成图片不完整的情况;而不加mode图片可能会被拉伸,造成图片损坏。

让轮播图自适应高度并且使用mode不拉伸

swiper.wxml

<swiper
      class="swipers"
      indicator-dots="{{indicatorDots}}" 
      autoplay="{{autoplay}}" 
      interval="{{interval}}" 
      duration="{{duration}}" 
      indicator-active-color="{{bg}}"
      circular="{{true}}"
      style='height:{{Hei}}'
      >
        <swiper-item>
          <image src='/static/1.jpeg' mode="widthFix" bindload='imgH'  style="width:100%;"></image>    // image加mode
        </swiper-item>
        <swiper-item>
          <image src='/static/2.jpeg' mode="widthFix" bindload='imgH'  style="width:100%;"></image>
        </swiper-item>
        <swiper-item>
          <image src='/static/3.jpeg' mode="widthFix" bindload='imgH'  style="width:100%;"></image>
        </swiper-item>
      </swiper>

swiper.js

data: {
  indicatorDots: true,
  autoplay: true,
  interval: 4000,
  duration: 1000,
  Hei: "",          //这是swiper要动态设置的高度属性
  navH: 0,
  share: ''
},
imgH:function(e){
  var winWid = wx.getSystemInfoSync().windowWidth;         //获取当前屏幕的宽度
  var imgh=e.detail.height;                     //图片高度
  var imgw=e.detail.width;
  var swiperH=winWid*imgh/imgw + "px"               //等比设置swiper的高度。  
  this.setData({
      Hei:swiperH                                     //设置高度
  })
},

效果如图:

解决加载图片闪烁的bug

描述:刷新页面,或者点击进入页面,图片就先显示上面第一个效果图,然后快速变为上面第二个效果图,这个闪烁的瞬间,用户体验很不好。结合上面代码,原因就是swiper先加载了它默认的150px的高度,然后通过image的bindload方法(让图片高度完整显示的方法)又设置了一次高度,这就造成了闪烁。查了很多资料,找到一个比较合理的方法,就是给swiper加一个类名,设置高度为0,然后通过image的bindload方法再设置高度,这样第一次默认高度就不会出现了。

.swipers {
  height: 0px;
}

图片自适应mode详细参考

目录
相关文章
|
7月前
|
小程序 JavaScript
【微信小程序】之轮播图、swiper、swiper-item、banner组件使用
【微信小程序】之轮播图、swiper、swiper-item、banner组件使用
【微信小程序】之轮播图、swiper、swiper-item、banner组件使用
|
3月前
|
小程序 前端开发 索引
微信小程序中的条件渲染和列表渲染,wx:if ,wx:elif,wx:else,wx:for,wx:key的使用,以及block标记和hidden属性的说明
这篇文章介绍了微信小程序中条件渲染和列表渲染的使用方法,包括wx:if、wx:elif、wx:else、wx:for、wx:key以及block标记和hidden属性的使用。
微信小程序中的条件渲染和列表渲染,wx:if ,wx:elif,wx:else,wx:for,wx:key的使用,以及block标记和hidden属性的说明
|
3月前
|
小程序 容器
微信小程序常用组件的简单使用 view,scroll-view,swiper,swiper-item,text,rich-text,button,image
本文介绍了微信小程序中常用组件的使用方法,包括view、scroll-view、swiper与swiper-item、text与rich-text、button以及image组件。详细解释了各组件的功能、属性以及如何在小程序页面中进行使用。
微信小程序常用组件的简单使用 view,scroll-view,swiper,swiper-item,text,rich-text,button,image
|
4月前
|
小程序 JavaScript
Taro@3.x+Vue@3.x+TS开发微信小程序,使用轮播图
本文介绍了使用 Taro 和 Vue 创建轮播组件的两种方法:一是通过 `&lt;swiper&gt;` 实现,二是利用 Nut UI 的 `&lt;nut-swiper&gt;` 组件实现。
Taro@3.x+Vue@3.x+TS开发微信小程序,使用轮播图
|
4月前
|
Web App开发 缓存 小程序
【Azure API 管理】从微信小程序访问APIM出现200空响应的问题中发现CORS的属性[terminate-unmatched-request]功能
【Azure API 管理】从微信小程序访问APIM出现200空响应的问题中发现CORS的属性[terminate-unmatched-request]功能
|
5月前
|
小程序 JavaScript 前端开发
【微信小程序-原生开发】实用教程06-轮播图、分类页签 tab 、成员列表(含Tdesign升级,切换调试基础库,设置全局样式,配置组件按需注入,添加图片素材,wx:for,生命周期 onLoad)
【微信小程序-原生开发】实用教程06-轮播图、分类页签 tab 、成员列表(含Tdesign升级,切换调试基础库,设置全局样式,配置组件按需注入,添加图片素材,wx:for,生命周期 onLoad)
177 0
|
6月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的闪烁物业管理系统附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的闪烁物业管理系统附带文章和源代码部署视频讲解等
21 0
|
7月前
|
小程序 JavaScript 数据库
微信小程序轮播图实现(超简单)
本文介绍了微信小程序使用内置swiper组件实现轮播图的简单方法。对于普通开发,示例代码展示了在wxml中配置swiper组件和嵌套image标签,以及相应的wxss样式设置。采用云开发时,wxml利用wx:for绑定数据列表,js部分展示如何从云端数据库获取数据并设置到list中。只需替换image的src为实际图片路径,即可完成轮播图功能。
442 0
|
7月前
|
小程序 前端开发 JavaScript
使用CSS的媒体查询功能在小程序中实现自适应布局
使用CSS的媒体查询功能在小程序中实现自适应布局
|
7月前
|
编解码 小程序 前端开发
在小程序中实现自适应布局或响应式设计
在小程序中实现自适应布局或响应式设计
下一篇
DataWorks