资讯专栏INFORMATION COLUMN

【微信小程序】采坑之scroll-view组件

张宪坤 / 2284人阅读

摘要:使用中文类的组件时候也就是需要呈现中文的组件,不限于组件是会自动换行的,这时候需求在中强制不换行。在使用非中文组件时候就一切正常。至于为啥使用中文组件会有一部分留白,这个我不知道是个例还是,反正只需要用相对定位移一下就可以了。

 

一、摘要

  今天在使用scroll-view组件的时候发现结果跟预想的不一样。其实也不是第一次用了,同样的写法却出现了意料之外的效果,所以认定是bug了。博主使用的是2.3.0版本,所以之前的版本应该也会有这个bug。

二、正文

  先上图

  这是在scroll-view中添加这么些text组件的时候的效果,代码我就不上了。发现文本组件莫名其妙的被挤下来了一些,我可是没有设置上边距的,而且留白的地方也没有任何东西。

  经过我苦思冥想以及各种尝试发现把中文换成英文或者数字,结果就不一样了。忘记说了,这个scroll-view设置的是x方向滑动。

  可以发现这次超出的部分没有自动换行了,而且可以左右滑动了,但是留白部分依然存在。

  我现在的需求是需要用中文,而要能滑动。之前导致无法滑动的原因是由于文本自动换行造成的。例如第三个text的“文本组件”这四个字竟然被分到两行,然后去控制台看布局的时候发现是这样的。

  厉害了,这文本组件竟然变成这样,更奇怪的是还没有影响其它兄弟组件的布局。

  咋整呐?抱着试一试的心态,我在scroll-view的样式中添加了这么一行代码。

white-space: nowrap;

  奇迹出现了,看下面的效果。

  这是我向右边拖动了一点点的效果。相信大家也能看懂上面那行css吧,就是强制不换行的意思。我猜测官方是用div去实现这个scroll-view的,而且没有设置这条属性,所以默认就是自动换行了。

  我们再来看下下面这个scroll-view的使用。

  大家可能跟我一样很奇怪,为啥这个就可以正常滑动呐。这里面我是没有强制不换行的。比较一些这两者的区别就知道为啥了。因为下面这个scroll-view中使用了图片,图片的宽度远远大于文字。而且我把图片和文字放在了一个view中,所以整个view的宽度以图片为主。

三、总结

  scroll-view中的元素大致分为两类,一类是中文,一类是非中文。使用中文类的组件时候(也就是需要呈现中文的组件,不限于text组件)是会自动换行的,这时候需求在css中强制不换行。在使用非中文组件时候就一切正常。

  至于为啥使用中文组件会有一部分留白,这个我不知道是个例还是bug,反正只需要用相对定位移一下就可以了。虽然这不是最好的解决方案,但是目前也没有更好的选择。

 

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/1798.html

相关文章

  • 程序采坑

    摘要:小程序采坑记上手小程序两个月,多多少少遇到一些坑,在此简单地作下总结。但一些人可能会遇过这种情况已知小程序组件默认高度,如果子元素高度过高,不会自适应高度。但实际上真是这样吗其实小程序的组件表现挺奇怪的。擅长微信小程序开发,系统管理后台。 小程序采坑记 上手小程序两个月,多多少少遇到一些坑,在此简单地作下总结。希望能对那些跟我一样有遇到过同样问题的人提供一点帮助,避免掉进这些坑,少走一...

    miya 评论0 收藏0
  • 信小程序坑之wx.miniProgram.postMessage

    摘要:也就是只有在小程序后退组件销毁分享时才会触发所以应该改变的时机,调换顺序就可以了获取成功这样再试试,发现能正常捕获消息了 工作中有个需求是小程序的网页在关闭的时候,需要回传给小程序一个参数 查阅小程序官方文档,有这样一个接口 wx.miniProgram.postMessage ,可以用来从网页向小程序发送消息,然后通过 bindmessage 事件来监听消息,如下是官方文档描述 sh...

    sorra 评论0 收藏0
  • 信小程序scroll-view的flex布局问题

    摘要:关于微信小程序的组件,第一次写的时候是直接在中用了一层容器包裹子元素,然后用了布局,并且是用了组件来实现的横向滚动,后面有提出改进,但是不记录下,就发现过了几天,就有点懵了效果图在里加一层容器,使用布局实现这里用布局实现的话,就要用组 关于微信小程序的scroll-view组件,第一次写的时候是直接在scroll-view中用了一层容器包裹子元素,然后用了flex布局,并且是用了组件来...

    nihao 评论0 收藏0
  • 信小程序之选项卡

    摘要:我们在函数中通过获取设备的宽高来设置组件高度以及高度为导航栏的高度点击导航栏切换内容点击切换滑动内容切换导航栏滑动切换可滚动区域滚动最底刷新数据页面上拉触底事件的处理函数更新列表一个漂亮的选项卡就完成了完整案例 选项卡随处可见,微信小程序中也不例外,下面来写一个简单的小程序选项卡 思路 之前写过基于swiper的选项卡,在小程序中有swiper组件,毫无疑问这里要用到swiper组件...

    stormjun 评论0 收藏0
  • 信小程序——商城篇

    摘要:微信小程序之跳转在进入商品详情页以后,点击左下角的图标原应该跳转到首页,但是一直点也不跳,而且也不报错。放下效果图微信小程序购物车购物车页面逻辑的话,要按业务需求来。 前言 随着wepy和mpvue的出现及流行,开发小程序变的越来越便捷和强大,作为基佬社区的一份子,我们都需要把自己遇到的问题以及如何解决的方式相互分享,这样才能帮助到更多的朋(ji)友(lao)。如有写的不足的地方,请各...

    k00baa 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<