小程序开发应用（一）

最新推荐文章于 2024-04-25 15:24:36 发布
最新推荐文章于 2024-04-25 15:24:36 发布
阅读量91 收藏
点赞数 2
分类专栏： 小程序开发 文章标签： 小程序 web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42459638/article/details/118863569
版权

1.图片自适应image标签mode=‘HeightFix’存在加载拉伸问题

解决办法：
（1）设置min-height，不能有效解决，会存在一定小问题
（2）使用 object-fit: contain;保持原有图片比例，内容缩放
（3）使用calc计算小程序默认px和原有宽高的比例，从而得出精准的图片高度

2.小程序loading效果的三种使用方式

（1）使用基础组件
（2）使用showLoading
showLoading
其中，可以用duration来设置loading存在时长，也可以在页面数据渲染完毕（onShow）使用hideLoading结束loading
局限性：无法自定义loading的图片格式
（3）使用showToast
showToast
其中，可以用duration来设置loading存在时长，也可以在页面数据渲染完毕（onShow）使用hideToast结束loading
优点：可以使用image自定义loading的效果，自定义效果优先级高于icon

amawe
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【笔记】微信小程序 - image组件的各种mode
香菇大葱的博客
09-01 9929
因为要求一个页面中只放一张图，宽度填充整个页面宽度，高度按比例缩放。本来是想图片可以自动填充，但宽度虽然够但高度被压缩，查看文档以后发现image里边还有一些挺有意思的属性。 为了方便看我给image加了1px 的棕色的边。
【微信小程序】图片被压扁怎么办？在image中添加 mode="widthFix"
神创的博客
03-19 3万+
参考：http://www.jb51.net/article/116779.htm下面这里参数是错的，不能用heightFix官方说明：http://www.jb51.net/article/116771.htm------------------------------------------------------...
一篇文章教你弄懂CSS背景图
黄河爱浪的博客-专注CSS,jQuery,uni-app领域
12-12 6006
在网络中经常看到大家写出如下这段示例的CSS代码，说是为了处理图片完全平铺页面。这代码不知道是那个没水平的在网络上广播出来的，而且还大受“好评”，简直离谱！！！
微信小程序image组件的mode总结+介绍（包含heightFix）
weixin_42017221的博客
10-24 3126
2.10.3版本后，微信小程序的图片即image组件新增了heightFix属性（mode），总共具有14种属性，满足各种情况的放置需要。14种属性可以分为两大类，一种是完全保留的缩放属性，一种是裁剪属性。
【微信小程序入门到精通】— button 和 image 超详细讲解
热爱生活，积极向上的阿酱！
10-03 5812
对于目前形式，微信小程序是一个热门，那么我们该如何去学习并且掌握之后去做实际项目呢？为此我特意开设此专栏，在我学习的同时也将其分享给大家！本文主要给大家介绍一下 button 和 image 组件，接下里我将逐一进行讲解！如果在往下阅读的过程中，有什么错误的地方，期待大家的指点！大家每天都要开开心心的喔，让我们一起快乐的学习吧！
使用Javascript开发OSX应用程序
03-03
在这篇文章里我想解释一下基本用法并且搭建一个小的示例应用。WWDC2014包含一个JavascriptforAutomation的session。这个session讲明了在automate应用里可以用Javascript代替AppleScript来进行开发。这本身就是一个...
微信应用号小程序开发IDE
08-10
微信应用号/小程序开发IDE
微信小程序微信小应用微信开发
08-10
微信小程序,微信小应用,微信开发
微信小程序开发视频教程全套
12-14
微信小程序（wei xin xiao cheng xu），简称小程序，缩写XCX，英文名Mini Program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。 全面开放申请后，主体...
微信小程序应用号开发体验
10-21
综上所述，微信小程序应用号开发体验不仅为我们展示了微信小程序开发的现状，也反映了微信小程序开发过程中遇到的种种挑战与限制。随着微信生态系统的不断壮大以及技术的不断进步，微信小程序的应用场景和功能将会...
【uniapp】处理因图片heightFix自适应导致的 Cannot read properties of null (reading ‘offsetWidth‘)
最新发布
mmmmmmmmzw的博客
04-25 425
然后试了试捕获异常，看看是不是我某个js语法不过关（比如对null做操作了），结果在一个上万行的文件中，程序在自适应时对一个width为null的值做了操作。我翻了下uni官网，发现heightFix还有点限制，但是我hbuilderX都已经3.99版本了，目前只做h5开发，不应该有问题，但问题就这样发生了。我确实调用了detail这个组件，然后我把各种image都一一排查之后，发现它们都是罪魁祸首，删一个图片组件，报错就少一个。首先这是错误信息，我的一个主页直接刷了满屏的下图报错。这是是触发错误的代码。
微信小程序图片高度固定,width:auto,图片不展示
z9874123的博客
02-24 876
微信小程序图片高度固定,width:auto,图片不展示 解决办法 image标签设置width:auto 设置mode属性mode=heightFix 高度固定,宽度不固定 小程序版本 2.10.3 mode的合法值
微信小程序中图片高度被压扁的解决办法
秋天
01-17 4675
微信小程序开发中使用image标签展示的长图因为太长，就会被压扁变形，让人看起来很难看，那如何才能让图片的高度自适应呢？使用css的height:auto也没办法实现。 翻看了小程序社区的问答，发现了一个解决方法，代码如下： <image src="helloworld.png" mode="widthFix"> 是的就是image标签上加入一
pythonmode英文说明书
张童鞋
10-14 2692
pythonmode是使用vim开发python的重要插件。 现将pythonmode的使用说明书英文版全文收录如下： *pymode.txt* *python-mode.txt* *pymode* *python-mode* ____ _ _ ____ _ _ _____ _ _ __ __ _____ ____ __
微信小程序基础 赋值、图片等比mode="widthFix"、绑定事件bindtap、事件传值data-id、添加class、跳转页面wx.navigateTo、wx.redirectTo 等
夜阑珊妖妖
12-03 551
1.赋值 <text class="zxp">{{title}}</text> <image wx:for="{{imgArr}}" wx:key="key" wx:if="{{index == 0}}" mode="widthFix" src="{{item}}" alt...
解决 img mode="widthFix" 高度闪烁问题
缘于始，终于途
05-30 6623
<img v-if="item===4" src="../../static/images/squarev.png" alt="" mode="widthFix" class="imgs"/> .imgs{height: 0; display:block;width: 100%;height: auto}
微信小程序image图片自适应宽度比例显示的方法
热门推荐
汉堡请不要欺负面条
05-05 9万+
一.了解image组件 由于image有默认的固定的宽度和高度，这样我们在做图片自适应的时候，就不好做了。下面就来一起解决下 二.方法 (一).使用mode：widthFix widthFix：宽度不变，高度自动变化，保持原图宽高比不变。 首先我们先设置image的mode为widthFix，然后给图片加一个固定rpx的宽度，比如：730rpx。 这样图片也可以自适应了。。因为
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值