无法在这个位置找到: head2.htm
当前位置: 建站首页 > 新闻动态 > 公司新闻 >

各大网站建网站-微信小程序 swiper 图片高度响应

时间:2021-05-02 15:26来源:各大网站建网站 作者:jianzhan 点击:
在开发设计微信小程序的新项目中,常常用到到swiper这一滚屏部件,可是应用的情况下会出现一个难题,swiper系统软件会默认设置一个高宽比并且是px为企业的,以下:swiper {display:block
--------

各大网站建网站

------- 在开发设计小程序的新项目中,常常会用到swiper这个轮播组件,可是应用的情况下会有一个难题,swiper系统软件会默认设置一个高宽比并且是px为企业的,以下:

swiper {
 display:block;
 height:150px;
这些主要参数能够用其它款式遮盖,可是照片不能能固定不动高宽比。image的高宽比是没法用px固定不动企业,通常为宽固定不动 rpx,mode= widthFix 高宽比自适应。下面就刚开始详细介绍怎样用照片在swiper自适应高宽比,而不会被遮住。

具体实际效果图以下:

二、完成全过程:

1、小程序合理布局网页页面wxml

 view >
 2、小程序 js网页页面

Page({
 * 网页页面的原始数据信息
 data: {
 currentNavtab: 0,//当今第几个swiper 
 bannerlist: [ lc10_yunzhuanma/201709/25/17/9754bbf536_v2_MTMyNjA4NDE2/thumb/2_640_480.jpg , lc09_yunzhuanma/201711/23/13/13/240be0b0ec63013fd97f1062b16b6043_v2_MTMzMjI3NDUy/thumb/2_640_480.jpg , lc10_yunzhuanma/201711/23/14/02/c3faf8192281dd307ccf6de3_v2_MTMzMjI3OTEw/thumb/2_640_480.jpg ],//照片切换数字能量数组
 indicatorDots: true,
 autoplay: true,
 interval: 5000,
 duration: 500,
 scrollWidth: 0,
 imgheights: []
 * 生命周期涵数--监视网页页面载入
 onLoad: function (options) {
 var that=this;
 wx.getSystemInfo({
 success: function (res) {
 //获得屏幕的宽度并储存
 that.setData({
 scrollWidth: res.windowWidth
 /*** 预览照片****/
 previewImage: function (e) {
 var current = e.currentTarget.dataset.src;
 wx.previewImage({
 current: current,// 当今显示信息照片的http连接 
 urls: this.data.bannerlist // 需要预览的照片http连接目录 
 //等比放缩照片并储存
 imageLoad: function (e) {
 //获得照片真正宽度 
 var imgwidth = e.detail.width,
 imgheight = e.detail.height,
 //宽高比 
 ratio = imgwidth / imgheight;
 //console.log(imgwidth, imgheight);
 //测算的高宽比值 
 var viewHeight = parseInt(this.data.scrollWidth) / ratio;
 var imgheight = viewHeight.toFixed(0);
 var imgheightarray = this.data.imgheights;
 //把每张照片的高宽比纪录到数字能量数组里
 imgheightarray.push(imgheight);
 this.setData({
 imgheights: imgheightarray,
 swiperChange: function (e) {
 //console.log(e.detail.current); 
 this.setData({
 currentNavtab: e.detail.current
三、结语:

小程序应用起来還是比较麻烦需要去获得照片的真正高宽比,随后等比放缩,在swiperChange的情况下去动态性更改高宽比。

大伙儿有甚么难题或技术性上的念头能够在此与大伙儿共享,还可以添加前端开发喜好者QQ群()一起学习培训发展:【幸凡前端开发技术性沟通交流群】如需转载请注明出处:art_detail.aspx?id=843【小程序 swiper 照片高宽比自适应+预览照片】幸凡学习培训网 0 ---------

各大网站建网站

------------ (责任编辑:admin)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
无法在这个位置找到: ajaxfeedback.htm
栏目列表
推荐内容


扫描二维码分享到微信