微信小程序> 微信小程序滚动至坑

微信小程序滚动至坑

浏览量:462 时间: 来源:FOR=10000

看到有人将scroll-top属性用在了scroll-x=true的scroll-view组件上,问题显而易见  
scroll-top=”10”设置竖向滚动条位置  
scroll-x=”true” 设置组件横向滚动  
自己写了一个横向滚动的scroll-view scroll-x=true的组件,但是死活不滚动(我顶你个肺啊)

scroll-view scroll-x="true" style="background:black;height:110px; white-space: nowrap;"  view style="background: red; width: 200px; height: 100px; display: inline-block;"/view  view style="background: green; width: 200px; height: 100px; display: inline-block;"/view  view style="background: blue; width: 200px; height: 100px; display: inline-block;"/view  view style="background: yellow; width: 200px; height: 100px; display: inline-block;"/view/scroll-view

1、height:110px;:scroll-view 容器高度要设置,不然你的view无论设置多高,都只有一点点高度
2、width: 200px; height: 100px; 内部的view必须要设置宽高,不然是不现实的哦
3、white-space: nowrap;:white-space 属性设置如何处理元素内的空白  
       normal 默认。规定段落中的文本不进行换行,空白会被浏览器忽略。  
       pre 空白会被浏览器保留。其行为方式类似 HTML 中的 pre 标签。  
       nowrap 文本不会换行,文本会在在同一行上继续,直到遇到br 标签为止。  
       pre-wrap 保留空白符序列,但是正常地进行换行。  
       pre-line 合并空白符序列,但是保留换行符。  
       inherit 规定应该从父元素继承 white-space 属性的值。
4、display: inline-block;:应用此特性的元素呈现为内联对象,周围元素保持在同一行

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎