微信小程序轮播图高度与图片高度不匹配问题
微信小程序轮播图高度与图片高度不匹配问题
在微信小程序项目中,为了美观给page设置了padding值,然后让轮播图里面的图片宽度为100%,高度widthFix自适应,出现了如下问题:指示器位置不对
原因是因为给page设置了padding值,图片100%宽度也会相应减小进自适应的高度也减少,而我们轮播图的高度是不受影响的,指示器位置是相对轮播图组件高度的,因此出现上述问题
解决方法:获取图片高度,然后把图片高度赋值给轮播图高度
wxml代码
<swiper indicator-dots="true" circular autoplay interval="3000" style="height:{{autoHeight}}px;"><block wx:for="{{banners}}" wx:key="index"><swiper-item><image class="bannerImage" src="{{item.pic}}" mode="widthFix" bindload="getHeight"/></swiper-item></block> </swiper>
js代码
getHeight() {const query = wx.createSelectorQuery()query.select('.bannerImage').boundingClientRect()query.exec(res => {this.setData({autoHeight: res[0].height})})},
微信小程序轮播图高度与图片高度不匹配问题相关推荐
- 微信小程序轮播图单独添加图片、修改轮播图图片、单独修改某张图片
小老弟上课的基本见解,有错误欢迎大牛们指正 <!--pages/swiper/swiper.wxml--> <text>pages/swiper/swiper.wxml< ...
- 微信小程序--轮播图
微信小程序轮播图的实现是利用了swiper组件(滑块视图容器). 主要参数如下: 属性名 类型 默认值 说明 indicator-dots Boolean false 是否显示面板指示点 indica ...
- 五分钟掌握微信小程序轮播图
微信小程序轮播图实现,比Android 轮播图来说,显得轻松多了. 微信小程序提供swiper组件,官网api提供的swiper滑块视图容器. 属性名 类型 默认值 说明 autoplay Boole ...
- 微信小程序---轮播图
0. 微信小程序轮播图的实现 a. 是利用了swiper组件滑块视图容器 b. swiper的文档 文档https://developers.weixin.qq.com/miniprogram/dev ...
- 微信小程序 轮播图代码
微信小程序轮播图的代码如下: 首先,在小程序的 wxml 文件中,添加如下代码: <!-- 轮播图组件 --> <swiper class="swiper" in ...
- 微信小程序轮播中的current_微信小程序轮播图
微信小程序轮播图实现,比Android 轮播图来说,显得轻松多了. 微信小程序提供swiper组件,官网api提供的swiper滑块视图容器. 属性名类型默认值说明 autoplay Boolean ...
- 微信小程序轮播图的实现
在Android或者ios中几乎所有的app都有轮播图这个效果,在android中一般是使用viewpager来实现的,在微信小程序中一般是用 swiper这个标签来实现的,我们在微信小程序文档中可以 ...
- 用uni-app开发的微信小程序轮播图----和用微信小程序原生开发的轮播图
话不多说,附赠代码 以下是用uni-app开发的轮播图 <template><view class="recommend"><view class=& ...
- 微信小程序轮播图中间变大_微信小程序实现带放大效果的轮播图
本文实例为大家分享了微信小程序实现带放大效果的轮播图,供大家参考,具体内容如下 效果如图 WXML WXSS .Carousel{ margin-top: 49px; background-color ...
最新文章
- switch( )的经典引用
- 【数据结构与算法】之深入解析“二叉搜索树中的插入操作”的求解思路与算法示例
- MyBatis 源码解读-配置解析过程
- 如何安装最新版本的 SAP ABAP Development Tool ( ADT ) 2021年度更新
- html 怎么显示在投影下面,投影仅底部css3
- php自动关闭页面代码,自动生成伪静态页面代码(简易版)
- Mac上MacVim安装与配置
- C++的掐拷贝、深拷贝【面向对象程序设计细节】
- 关于ConcurrentDictionary的线程安全
- mysql 减去_MySql进阶面试题
- 前端性能毫秒必争综合方案
- 重写ArrayAdapter
- Mysql之无法查询中文字解决办法
- 实例3、研究 ICMP 数据包
- HTML中,使用hover属性完成鼠标悬停切换图片效果
- 九宫格按键输入(机考Python)
- 浏览器功能大比拼:谁更出彩?
- 为什么一个概念会非常难懂呢?人是如何理解的呢?
- 计算机电脑怎么改皮肤,终极:如何更改计算机鼠标的皮肤
- dell10代cpu装linux,戴尔10代cpu装win7系统及bios设置|戴尔十代cpu台式机装win7
热门文章
- VS 未能加载文件或程序集“xxx.dll” 原因分析
- pytho简单爬虫_模拟登陆西电流量查询_实现一键查询自己的校园网流量
- 特步2020年总收入81.72亿元,主品牌下半年显著复苏
- Java私活300元,完成JavaWeb志愿者管理系统(四)
- MySQL基础篇-MySQL 命令大全
- Python定时任务库schedule的使用
- 程序员练级攻略(2018) --左耳朵耗子
- 南邮软件设计matlab,通信软件设计基础,南邮,实验报告(共10篇).doc
- 招聘管理系统有哪些比较实用的功能呢?
- move_base参数配置