小程序开发Scroll-view横向滑动的问题

编程知识 更新时间:2023-04-04 02:08:32

近日在学习小程序的开发,其间在进行scroll-view滑动组件时,发现了个坑,目前官方文档有缺陷。
如下图所示:

在微信公众平台-小程序开发https://developers.weixin.qq/miniprogram/dev/component/scroll-view.html中scroll-view组件的横向滚动时,很多同学会发现,按文档所说的做也还是无法左右滑动,这时您可能需要考虑,scroll-view包裹的所有元素是否进行横向排列,平时我们对一组元素进行横向排列时,常用display:flex、float:left或行内元素性质的办法.但是,在小程序的这个组件里display:flex与float:left是行不通的,在这里,我们要使用display:inline-block利用行内元素性质来进行横向排列。

好了,子元素的排列解决了,这里我们要对父元素做些操作,给元素一个宽高,然后,你再试,发现还是不行!从调试器中你可以发现子元素已经变成了行内元素但是,还是未在一行显示,因为父元素的宽度的问题你的子元素只有自动 换行处理,这里你会想给scroll-view的宽增大,这里你会发现这是错误的做法,虽然子元素确实在一行显示了,但是scroll-view的显示视图变宽,仍无法滑动。

我在网上四处百度,并无收获,直到看到了white-space这个css属性里,发现如果将元素强制进行不换行处理,设置scroll-ivew 元素white-space: nowrap,问题解决!

更多推荐

小程序开发Scroll-view横向滑动的问题

本文发布于:2023-04-04 02:08:00,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/d5fdcd1c217e59f7860971d30f55cd46.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:横向   程序开发   Scroll   view

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!

  • 40654文章数
  • 14阅读数
  • 0评论数