微信小程序 scroll-view_微信小程序scroll-view

微信小程序 scroll-view 用法

微信官方文档地址：https://developers.weixin.qq.com/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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

隐藏滚动条

提示：css

::-webkit-scrollbar {
       display:none;
       width:0;
       height:0;
       color:transparent;
}
1
2
3
4
5
6

提示：scroll-view 属性

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

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

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