微信小程序-scroll-view实现横纵滚动轴【每天一个上分小技巧】

曾经终败给现在 2023-07-22 06:58 12阅读 0赞

> 辗转反侧，侧头拿起手机，看着手机屏幕，一天就这么灰溜溜的度过了四分之三，总感觉缺点什么，奥，于是我心里有了答案，今天的文章还未更，于是乎，先去热饭吧，争取在九点之前把晚饭吃完，坚持养成一个良好的学习习惯不能半途而废，不要因为今天是休息日，就可以松懈，每天学习一个“上分”小技巧，总有一日，你会为今日的自己坚持学习而感到自豪，成功富有的人不是一日就能登顶，不积跬步无以至千里，一日学习，终生学习！
> 
> 今天给小伙伴们分享点啥呢?奥，昨天的第三轮提测顺利结束，bug并不是很多，但是让我存留脑中，就是小程序都是基于竖屏模式开发的，而忽视了横屏模式是否会对微端有不友好的操作体验，结果让人出乎意料，很多组件在横屏状态下并不是体验良好，比如下面这个，基于弹框选择学生列表，但出于横屏模式下，却由于横屏的高度限制，无法正常显示“确定”“取消”按钮，如此，测试组觉得不行， 无论是基于横屏还是竖屏，最基本的就是先保证页面样式不跑样，其次再优化横屏体验感等。

基于弹框无法在页面上出现完整显示，需加一个滚动条针对该弹框能纵轴滚动；

于是我想起了官文中有介绍一个 叫" scroll-view" 的视图容器；

### **scroll-view** ###

中译：可滚动视图区域

用法：可滚动视图区域。使用竖向滚动时，需要给[scroll-view][]一个固定高度，通过 WXSS 设置 height。组件属性的长度单位默认为px，[2.4.0][]起支持传入单位(rpx/px)。

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>默认值</th> 
   <th>必填</th> 
   <th>说明</th> 
   <th>最低版本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>scroll-x</td> 
   <td>boolean</td> 
   <td>false</td> 
   <td>否</td> 
   <td>允许横向滚动</td> 
   <td><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.0.0</a></td> 
  </tr> 
  <tr> 
   <td>scroll-y</td> 
   <td>boolean</td> 
   <td>false</td> 
   <td>否</td> 
   <td>允许纵向滚动</td> 
   <td><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.0.0</a></td> 
  </tr> 
 </tbody> 
</table>

若要实现纵轴出现滚动轴，设置 scroll-y 属性即可 默认是允许，横轴设置scroll-x ；

**预览效果**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk3MDc0Mw_size_16_color_FFFFFF_t_70][]

要想了解更多，可戳官文档：[https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html][scroll-view]

--------------------

### 往期回顾： ###

【1】[view中放纯数字或字母会不会自动换行？][view]

【2】[图片怎么保存本地？][Link 1]

【3】[如何实现输入框带有emoji表情？][emoji]

--------------------

> ❤如果文章对您有所帮助，就在文章的右上角或者文章的末尾点个赞吧！(づ￣ 3￣)づ
> 
> ❤如果喜欢大白兔分享的文章，就给大白兔点个关注吧！(๑′ᴗ‵๑)づ╭❤～
> 
> ❤对文章有任何问题欢迎小伙伴们下方留言或者入群探讨【群号：708072830】
> 
> ❤鉴于个人经验有限，所有观点及技术研点，如有异议，请直接回复讨论（请勿发表攻击言论）。

[scroll-view]: https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html
[2.4.0]: https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk3MDc0Mw_size_16_color_FFFFFF_t_70]: /images/20230528/29ca5e11070d4301a8e5b78a6b5718c8.png
[view]: https://blog.csdn.net/weixin_43970743/article/details/105297809
[Link 1]: https://blog.csdn.net/weixin_43970743/article/details/105292664
[emoji]: https://blog.csdn.net/weixin_43970743/article/details/105274565