微信小程序遇到的问题
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。
相关文章
- 【愚公系列】2022年08月 微信小程序-view生成分享图片
- pycharm打开闪退_手机微信闪退怎么回事
- 云开发超多功能工具箱组合微信小程序源码-星泽V社
- 又一个微信聊天机器人横空出世了,人人可用!
- 云服务器10行代码推送值班消息到微信公众号2021.6.9
- 微信小程序长按事件
- 【愚公系列】2022年11月 微信小程序-本地生活项目-首页
- 【说站】喝酒神器微信小程序源码 支持流量主解锁多人对战
- 【说站】猫狗叫声模拟器微信小程序前端源码
- PHP小程序开发_微信小程序后端语言
- 微信小程序PC端正常,真机调试与手机端报错ERR_CERT_AUTHORITY_INVALID
- 【愚公系列】2022年10月 微信小程序-电商项目-小微商户支付后端功能实现(node版)
- 微信公众号服务号配置对接在线客服系统教程
- 开发一个微信小程序(5):查询天气-添加未来24小时逐小时天气
- 分享10个YYDS的微信小程序开源项目
- 微信机器人升级到 5.9,增强图片素材功能
- 微信突然“被绿”了 来看新版微信都有啥惊喜
- 微信 v6.3.5 for Android 正式版发布
- 足足8项新功能!安卓版微信8.0.9快速体验
- 微信小程序带来的Linux时代(微信小程序linux)
- 微信小程序之初步探究
- 海淀区检察院拟对腾讯提起公益诉讼 微信称将自检自查虚心接受建议
- 微信公众号学习Redis,打开新大门(微信公众号redis)
- 微信小程序可直接从手机桌面进入,张小龙再次在朋友圈公布最新进展
- 微信公众平台开发入门教程(图文详解)