码迷,mamicode.com
首页 > 微信 > 详细

微信小程序遇到的问题

时间:2018-06-09 22:11:21      阅读:444      评论:0      收藏:0      [点我收藏+]

标签:aspect   观点   asp   over   组件   动态   技术   理解   空白   

1.小程序navigator点击时不显示背景颜色

 

详情见官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html?t=2017112

指定点击时的样式类,当hover-class="none"时,没有点击态效果

技术分享图片

 2.微信小程序image组件中aspectFill和widthfix模式应用详解

<image mode="aspectFill" src="{{fengmian}}"></image>

aspectFill 保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。

aspectFill同样保持图片的宽高比不会变形。但它让图片完全填满整个容器,类似于scaleToFill这种模式。不同的是,scaleToFill会改变图片的宽高比,而aspectFill不会。

用我们提到的“容器”的观点来理解aspectFill。既然aspectFill一定要填满整个容器,那么首先要让这张图片的整体尺寸是大于这个容器的,就等比例放大图片(任意一边小于容器都需要放大,否则就会留下空白),让图片的某一边刚好接触容器的一边,同时另外一边又不会小于容器(可以超出,因为这一边会被截取)。

如果原始尺寸大于容器,则需要等比例缩小,缩小的要求同样是一边刚好接触容器,另外一边要等于或者超出容器。。这样就保证了图片可以完全填满整个容器,但某一边要发生截取。那么问题来了,如何截取?在超出容器的这一边上,是保留图片的上部、中部还是下部?答案是:中部。

那么把代码设置为mode=aspectFill的效果,把原始图片的中间部分保留下来。

技术分享图片

Widthfix 宽度不变,高度自动变化,保持原图宽高比不变。

Widthfix属性的最大特点是,图片将不会按照设定的尺寸呈现,比如设置image宽度为750px,高度为340px,如果设置mode=widthfix,则图片最终不会按照750px和340px呈现,除非原始图片切好是这个尺寸。这个属性让宽缩放至指定尺寸,再动态计算高度,如图所示。

<image mode="widthFix" src="{{fengmian}}"></image>

技术分享图片

 

微信小程序遇到的问题

标签:aspect   观点   asp   over   组件   动态   技术   理解   空白   

原文地址:https://www.cnblogs.com/huanghuali/p/9160890.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!