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。

微信小程序遇到的问题的更多相关文章

  1. 微信小程序开发心得

    微信小程序也已出来有一段时间了,最近写了几款微信小程序项目,今天来说说感受. 首先开发一款微信小程序,最主要的就是针对于公司来运营的,因为,在申请appid(微信小程序ID号)时候,需要填写相关的公司 ...

  2. 微信小程序体验(2):驴妈妈景区门票即买即游

    驴妈妈因为出色的运营能力,被腾讯选为首批小程序内测单位.驴妈妈的技术开发团队在很短的时间内完成了开发任务,并积极参与到张小龙团队的内测问题反馈.驴妈妈认为,移动互联网时代,微信是巨大的流量入口,也是旅 ...

  3. 微信小程序(微信应用号)组件讲解

    这篇文章主要讲解微信小程序的组件. 首先,讲解新建项目.现在有句话:招聘三天以上微信小程序开发,这个估计只能去挖微信的工程师了.技术新,既然讲解,那我们就从开始建项目讲解. 打开微信web开发者工具, ...

  4. 神技!微信小程序(应用号)抢先入门教程(附最新案例DEMO-豆瓣电影)持续更新

    微信小程序 Demo(豆瓣电影) 由于时间的关系,没有办法写一个完整的说明,后续配合一些视频资料,请持续关注 官方文档:https://mp.weixin.qq.com/debug/wxadoc/de ...

  5. 通过微信小程序看前端

    前言 2016年9月22日凌晨,微信官方通过“微信公开课”公众号发布了关于微信小程序(微信应用号)的内测通知.整个朋友圈瞬间便像炸开了锅似的,各种揣测.介绍性文章在一夜里诞生.而真正收到内测邀请的公众 ...

  6. 快速了解微信小程序的使用,一个根据小程序的框架开发的todos app

    微信官方已经开放微信小程序的官方文档和开发者工具.前两天都是在看相关的新闻来了解小程序该如何开发,这两天官方的文档出来之后,赶紧翻看了几眼,重点了解了一下文档中框架与组件这两个部分,然后根据简易教程, ...

  7. 来自于微信小程序的一封简讯

    9月21晚间,微信向部分公众号发出公众平台-微信应用号(小程序)的内测邀请,向来较为低调的微信在这一晚没人再忽视它了. 来自个人博客:Damonare的个人博客 一夜之间火了的微信应用号你真的知道吗? ...

  8. 微信小程序前端源码逻辑和工作流

    看完微信小程序的前端代码真的让我热血沸腾啊,代码逻辑和设计一目了然,没有多余的东西,真的是大道至简. 废话不多说,直接分析前端代码.个人观点,难免有疏漏,仅供参考. 文件基本结构: 先看入口app.j ...

  9. 微信小程序初探

    做为码农相信大家最近肯定都会听到微信小程序,虽然现阶段还没有正式开放注册,但大家可以还是可以开发测试. 到微信的WIKI(http://mp.weixin.qq.com/wiki?t=resource ...

  10. 【微信小程序开发】之如何获取免费ssl证书【图文步骤】

    微信小程序要求所有网络请求都走ssl加密,因此我们开发服务端接口需要配置为https 这篇文章介绍一下如何 在 startssl 申请一个免费的ca证书. 1. 打开网站  https://www.s ...

随机推荐

  1. myeclipse通过数据表生成jpa或hibernate实体

    1. 创建数据库连接 2. 选择表 3. 生成 hibernate mapping 4. 生产jpa

  2. ansible模块学习

    ansible的功能: 模块化任务,调用特定的模块,完成特定的任务 基于python语言实现,由paramiko.pyyaml和jinja2三个模块构建 部署简单,agentless,ansible基 ...

  3. UIview需要知道的一些事情:setNeedsDisplay、setNeedsLayout

    UIview需要知道的一些事情:setNeedsDisplay.setNeedsLayout 1.在Mac OS中NSWindow的父类是NSResponder,而在i OS 中UIWindow 的父 ...

  4. rook

    https://github.com/rook/rook https://rook.github.io/docs/rook/master/ Rook是在云本地环境中运行的分布式存储系统的开源编排器. ...

  5. 【BZOJ2716】天使玩偶【kd树】

    这个题要求kd树支持两个操作. 1.插入一个新的点. 2.查询某个点最近曼哈顿距离. 注意查询曼哈顿距离和查询欧几里得距离,是有区别的.(估价函数不同). #include <cstdio> ...

  6. a=a++问题引发的思考

    使用javap命令解析出来的a=a++过程的字节码(int a=1; a=a++): 0: iconst_1  将数值1压入栈顶 1: istore_1  栈顶值1存入局部变量表的第一个slot中 2 ...

  7. 理解数据库中的undo日志、redo日志、检查点

    数据库存放数据的文件,本文称其为data file. 数据库的内容在内存里是有缓存的,这里命名为db buffer.某次操作,我们取了数据库某表格中的数据,这个数据会在内存中缓存一些时间.对这个数据的 ...

  8. loadrunner12-用Chrome如何录制脚本

    1.下载Chrome最新版本: 2.打开需要录制的网页,按下F12按钮: 3.在弹出框中,选择Network标签,在该标签下单击红色按钮(开始录制按钮): 4.按下F5刷新页面(不管是否需要录制当前页 ...

  9. 同台机器2个网卡配置同段IP

    看个例子:1.on serverifconfig eth4 192.168.1.10/24 upifconfig eth5 192.168.1.11/24 up2.on clientifconfig ...

  10. Python爬虫进阶四之PySpider的用法

    审时度势 PySpider 是一个我个人认为非常方便并且功能强大的爬虫框架,支持多线程爬取.JS动态解析,提供了可操作界面.出错重试.定时爬取等等的功能,使用非常人性化. 本篇内容通过跟我做一个好玩的 ...