微信小程序遇到的问题

Posted 2020-11-14 前端HL

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>

 

微信小城hidden与wx:if的区别：

wx:if 与 hidden 都可以控制微信小程序中元素的显示与否。

wx:if 是遇 true 显示，hidden 是遇 false 显示。

他们还有一层细微的区别：

wx:if 在隐藏的时候不渲染，而 hidden 在隐藏时仍然渲染，只是不呈现。

所以如果频繁切换的话，用 wx:if 将会消耗更多资源，因为每次呈现的时候他都会渲染，每次隐藏的时候，他都会销毁。

如果切换并不频繁的话，用 wx:if 相对来说较好些，因为它会避免初始就一下渲染那么多。

总结

• 频繁切换：用 hidden。
• 偶尔切换：用 wx:if。