小程序 image组件，高度自适应

期望的效果是，image的高度height是自动的。

网上好多说把image的mode设置为widthFit。这种方法还是需要给image设置宽度高度。并不是height自动，而是height固定，在显示的时候，显示的区域在高度上是自适应的

所以还是需要用js计算

imageLoad: function(e) {

    var $width=edetailwidth,//获取真实宽度

        $height=edetailheight,

        ratio=$width/$height;    //的真实宽高比例varviewWidth=718,//设置显示宽度，左右留有16rpx边距viewHeight=718/ratio;    //计算的高度值varimage=thisdataimages;

      //将的datadata-index作为image对象的key,然后存储的宽高值

image[etargetdatasetindex]={

        width:viewWidth,

        height:viewHeight

      }

      thissetData({

          images:image

      })

  }

>

步骤1：首先我们打开微信开发者工具。

步骤2：然后打开一个wxml文件。

步骤3：在wxml文件中使用image标签插入一张。

步骤4：写一段文字，跟一起同时放在父元素main-memu里面。

步骤5：然后打开wxss文件。

步骤6：在wxss文件里面，为和文本的父元素main-memu设置宽和高。

步骤7：设置完宽和高之后，通过text-align: center让文本居中显示！

步骤8：打开模拟器查看效果！

本系列主要对小程序常用的组件做一个总结，方便自己及其它小程序开发者作为字典查阅和检索。

小程序组件有一些公共属性，在每个组件中代表的意义和数据类型都是一样的。

容器组件：内部能嵌套任何标签。常用的视图容器有： view , scroll-view , swiper

<view/> 是一个块级容器组件，任何一种复杂的布局都可以嵌套在 <view/> 组件内，并在 wxss 中设置相关样式。

<view/> 除了上述组件共有的属性外，还包含一组关于点击行为的属性。

在布局中，需要容器具有可滑动的功能，且能监听滚动、触顶、触底等事件，就需要 <scroll-view/> 组件， <scroll-view/> 在 <view/> 组件上添加滚动相关的属性，通过这些属性，可以响应滚动相关事件。

注意:

<textarea/> , <video/> , <map/> , <canvas/> 不能嵌套在 <scroll-view/> 中使用

利用 swiper 组件，可以实现轮播图，滑动页面，预览等，一个完整的滑块视图软件由 <swiper/> 和 <swiper-item/> 两个标签组成，不能单独使用。一个 <swiper/> 只能嵌套一个或多个 <swiper-item/> 标签，放置其它的标签会被删除，其中， <swiper-item/> 中能放置任何标签，高度默认为 100% ,另外没有任何其它特殊属性。

<swiper/> 的属性如下：

微信小程序image组件中的bindload不触发问题

原因分析

        做小程序预加载功能的时候，发现切换页面后总是停留在预加载的上，多次调试后发现，是因为第一次加载的时候可以正常触发bindload，但是刷新之后有缓存，就不会再执行bindload了。

解决办法

解决方法是前端加载url的时候，在后面加一串随机数，这样小程序每次都会认为是新，不会有缓存

链接：>

在微信小程序中，可以使用 webview 嵌套 web 页面，有些时候在 web 页面填写了表单没有提交，当用户点击左上角小程序的返回时，希望可以d框提示用户还有未保存内容，是否确定返回，根据用户选择之后在确定是否返回。

由于返回图标是微信小程序自带的，因此我们无法通过 web 页面的路由离开钩子(如：vue中beforeRouterLeave钩子函数)来控制页面是否关闭，因此想要在离开页面时在 web 页面进行逻辑控制是有难度的。

使用浏览器的 popstate 事件来禁止页面跳转。

我在做微信小程序项目遇到的坑，cover-image和image都是用来显示的，但是我们要慎用cover-image，但我们写的页面是有d出层的，你使用这种标签写的，不会显示出来，但换成image就可以，所以，我们要慎用cover-image。

在小程序中image标签跟view标签上下会有空隙，我们可以在image标签中设置vertical-align:top/bottom/text-top/text-bottom，原因：文字等inline元素默许是跟父级元素的baseline对齐，而baseline又和父级底边有必定间距

以上就是关于小程序 image组件，高度自适应全部的内容，包括:小程序 image组件，高度自适应、小程序 image 组件 webp 属性、如何将box中的内容放在图片上微信小程序中等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！