小程序swiper组件高度自适应【转载】
最近在做小程序开发,复制官方文档上的swiper组件实测后发现,图片不能自适应。网上找了几个版本测试都发现存在一些小问题,目前这个版本本人实测是最好用的。记录一下,方便日后使用。
感谢原创大神的帮助,文章地址:https://www.cnblogs.com/wangyihong/p/8610956.html
wxml:
<view class='swiper'>
<swiper indicator-dots="{{indicatorDots}}" vertical="{{vertical}}" autoplay="{{autoplay}}" duration="{{duration}}" interval='{{interval}}' bindchange="bindchange" circular="{{circular}}" style="height:{{imgheights[current]}}rpx;">
<block wx:for='{{imgList}}' wx:key="{{index}}">
<swiper-item>
<image src="{{item}}" data-id='{{index}}' class="slide-image" mode="widthFix" bindload="imageLoad"/>
</swiper-item>
</block>
</swiper>
</view>
wxss:
.swiper image {
width: 100%;
height: auto;
}
js:
data: {
//图片地址
imgList: ['/images/wyh-img_bg.png', '/images/wyh-img8.png', '/images/wyh-img_shop1.png', '/images/wyh-img_bg1.png'],
//是否采用衔接滑动
circular: true,
//是否显示画板指示点
indicatorDots: false,
//选中点的颜色
indicatorcolor: "#000",
//是否竖直
vertical: false,
//是否自动切换
autoplay: true,
//自动切换的间隔
interval: 2500,
//滑动动画时长毫秒
duration: 100,
//所有图片的高度
imgheights: [],
//图片宽度
imgwidth: 750,
//默认
current: 0
},
imageLoad: function (e) {//获取图片真实宽度
var imgwidth = e.detail.width,
imgheight = e.detail.height,
//宽高比
ratio = imgwidth / imgheight;
console.log(imgwidth, imgheight)
//计算的高度值
var viewHeight = 750 / ratio;
var imgheight = viewHeight;
var imgheights = this.data.imgheights;
//把每一张图片的对应的高度记录到数组里
imgheights[e.target.dataset.id] = imgheight;
this.setData({
imgheights: imgheights
})
},
bindchange: function (e) {
// console.log(e.detail.current)
this.setData({ current: e.detail.current })
},
小程序swiper组件高度自适应【转载】的更多相关文章
- 微信小程序之swiper组件高度自适应
微信小程序之swiper组件高度自适应 要求: (顶部广告栏 ) 改变swiper组件的固定高度,使之随内部每张图片的高度做自适应 原理: 图片加载完之后,获取图片的原始宽高,根据宽高比,计算出适应后 ...
- 微信小程序 swiper 组件坑
swiper 组件高度被限制为150px了,所以内容无法撑开. 解决办法 给这组件重新设置个高度,然后在把里面的图片设置为自动适应容器大小.图片模式设置为 宽度不变 自动适应高度 <swiper ...
- 基于angular实现模拟微信小程序swiper组件
这段时间的主业是完成一个家政类小程序,终于是过审核发布了.不得不说微信的这个小程序生态还是颇有想法的,抛开他现有的一些问题不说,其提供的组件系统乍一看还是蛮酷的.比如其提供的一个叫swiper的视图组 ...
- 跳坑 小程序swiper组件 轮播图片 右边空白问题
swiper 组件 设置轮播图片时,右侧会出现空白的情况:是因为 swiper组件有默认的 高度和宽度,所以我们在设置图片高度和宽度的同时, 也要为 设置高度和宽度,和高度和宽度样式一样的就可以.
- 小程序swiper组件的bindchange方法重复执行问题
这是官方文档的说法给出了swiper组件一直来回滑动的bug原因 以下是修正方法 <swiper autoplay="{{autoplay}}" interval=" ...
- 百度小程序-swiper组件
.swan <!-- 轮播图S --> <view class="swiper-box"> <swiper class="banner&qu ...
- 微信小程序swiper组件实现图片宽度自适应
wxml 代码: <!--pages/swipe/swipe.wxml--> <view> <swiper circular="true" indic ...
- 微信小程序--swiper组件
<view class='swiper-container'> <swiper indicator-dots="true" autoplay=" ver ...
- 第五篇、微信小程序-swiper组件
常用属性: 效果图: swiper.wxml添加代码: <swiper indicator-dots="{{indicatorDots}}" autoplay="{ ...
随机推荐
- 在阿里云Windows Server 上部署ASP .NET CORE2.0项目
近期使用ASP.NET Core2.0对博客进行了重写,在部署到服务器时遇到了一些问题,来记录一下留用. 配置环境 安装 .Net Framework3.5 在IIS管理器上直接开启,这里总是失败,上 ...
- 深入浅出MS SQL——编辑table 出错
- php 魔术方法 说明
1.__get.__set这两个方法是为在类和他们的父类中没有声明的属性而设计的.◆__get( $property ) 当调用一个未定义的属性时,此方法会被触发,传递的参数是被访问的属性名.◆__s ...
- priority_queue的优先级变化(结构体的写法)
priority_queue的优先级变化(结构体的写法) 在头文件中加上#include <queue> 即可使用stl中的库函数priority_queue,优先队列默认的是从大到小的优 ...
- swift语言的特征:类型系统与函数式编程:swift是面向类型和面向函数编程的语言
swift语言的特征: 类型系统:值类型与引用类型.泛型.协议类型 函数式编程:
- 解压版中文乱码问题MYSQL中文乱码
安装的是解压版的MYSQL,具体配置参考:https://jingyan.baidu.com/article/9c69d48f85032f13c9024e15.html . 1:解压之后copy 一个 ...
- MyBatis之Collection
Collection翻译过来,意为"集合"的意思,既然是集合,肯定是代表多个. MyBatis以其自身,小巧易懂,闻名于JavaEE. 传统的JDBC就不说了,Hibernate记 ...
- dbca时报错:ORA-12705(NLS_LANG=AMERICAN_AMERICA.UTF8);
#add by zexport ORACLE_BASE=/u01/oracle export ORACLE_HOME=/u01/oracle/11.02 export ORACLE_SID=z exp ...
- OpenCV——KAZE、AKAZE特征检测、匹配与对象查找
AKAZE是KAZE的加速版 特征点查找和绘制:把surf中的surf改成KAZE或AKAZE即可 #include <opencv2/opencv.hpp> #include < ...
- Ubuntu 重新安装声卡驱动
有的时候ubuntu 的声卡不能用,没有声音也不能使用麦克风,所有很困惑,查看声卡驱动的时候不显示声卡的驱动,所有我们要自己安装声卡驱动, 1.下载驱动包这是比较新的声卡驱动,1.0.20 $ wge ...