banner
banner
banner
NEWS LETTER

微信小程序-动态展示图片,高度不一致

Scroll down

获取最高的高度展示

  • 使用swiper组件将图片的框架搭建好(使用image标签最好加个『mode =”widthFix”』)

如果图片是动态生成的的,按以下步骤走

  1. 由于高度不一致,通过『wx.createSelectorQuery()』获取每一张图片的属性(重点是高度
  2. 因为框架初始要渲染,所以代码要写在onReady钩子里
  3. 定义一个存放图片节点的空数组,因为要全局使用,需放在page上方
  4. 要获取图片存储的选择器,获取图片的属性(id 选择器是一对一,类选择器是选全部)
  5. swiper本身有一个current属性,需在data中初始化
  6. 定义一个数组,将获取到的图片节点信息res[0]存放在里面,为防止报错最好 『或一个初始值(数组[],对象 null)』
  7. current 要动态获取
  8. 判断是否有图片,有的话就将定义的数组赋值给图片节点存放的数组
  9. 获取到图片的高度,首先要在data初始化,然后然后动态传递给初始化变量
  10. 查看显示的长度是否异常(从执行的函数开始往下找
  11. 异步,使用延时器加载

图片非动态的直接使用css样式和mode来控制

其他文章
cover
微信小程序-sku算法
  • 24/11/04
  • 09:57
  • 微信小程序
目录导航 置顶
  1. 1. 获取最高的高度展示
    1. 1.1. 如果图片是动态生成的的,按以下步骤走
    2. 1.2. 图片非动态的直接使用css样式和mode来控制
请输入关键词进行搜索