微信小程序 scroll-view 用法

微信官方文档地址：https://developers./miniprogram/dev/component/scroll-view.html

微信小程序 scroll-view

前言

提示：以下是本篇文章正文内容，下面案例可供参考

一、scroll-view 是什么？

可滚动视图区域 。

二、scroll-view 使用步骤

1.

代码如下（示例）：

<scroll-view>/* scroll-y="true" 允许纵向滚动必须给 scroll-view css 设置 height 如果不设置就会不生效还有不能在 scroll-view css 设置 margin 否则 内容没有超出高度就会出现滚动条scroll-top 设置竖向滚动条位置*//* scroll-x="true" 允许横向滚动必须给 scroll-view css 1）. width 2). 必须给scroll-view标签添加white-space:nowrap属性3). 给子元素添加display:inline-block属性还有不能在 scroll-view css 设置 margin 否则 内容没有超出高度就会出现滚动条scroll-left 设置横向滚动条位置横向滚动开启后不能实现内部在写一个纵向滚动的，样式会直接乱。*/</scroll-view>

隐藏滚动条

提示：css

::-webkit-scrollbar {display:none;width:0;height:0;color:transparent;}

提示：scroll-view 属性

<scroll-viewenhanced:show-scrollbar="false"// show-scrollbar 滚动条显隐控制 (同时开启 enhanced 属性后生效)// enhanced 启用 scroll-view 增强特性，启用后可通过 ScrollViewContext 操作 scroll-view// ScrollViewContext ，通过 wx.createSelectorQuery 的 NodesRef.node 方法获取。 仅在 scroll-view 组件开启 enhanced 属性后生效。</scroll-view>

提示：设置自定义下拉刷新区域背景颜色

refresher-background="#FFF"// 组件 属性 不是 css