当前位置：网站首页>Wechat applet scroll view component scrollable view area

Wechat applet scroll view component scrollable view area

2022-07-04 06:35:00 【JackieDYH】

Scrollable view area . When using vertical scrolling , Need to give scroll-view A fixed height , adopt WXSS Set up height. The default length unit for component properties is px, 2.4.0 Support for incoming units (rpx/px).

attribute	type	The default value is	Required	explain	Minimum version
scroll-x	boolean	false	no	Allow horizontal scrolling	1.0.0
scroll-y	boolean	false	no	Allow vertical scrolling	1.0.0
upper-threshold	number/string	50	no	From the top / How far to the left , Trigger scrolltoupper event	1.0.0
lower-threshold	number/string	50	no	From the bottom / How far to the right , Trigger scrolltolower event	1.0.0
scroll-top	number/string		no	Set the vertical scroll bar position	1.0.0
scroll-left	number/string		no	Set the horizontal scroll bar position	1.0.0
scroll-into-view	string		no	Value should be a child element id（id Cannot start with a number ）. Set which direction to scroll in , In which direction to scroll to the element	1.0.0
scroll-with-animation	boolean	false	no	Use animated transitions when setting scroll bar positions	1.0.0
enable-back-to-top	boolean	false	no	iOS Click on the top status bar 、 When Android double clicks the title bar , Scroll bar back to top , Only vertical	1.0.0
enable-flex	boolean	false	no	Enable flexbox Layout . After opening , The current node declares `display: flex` Will become flex container, And act on its child nodes .	2.7.3
scroll-anchoring	boolean	false	no	Turn on scroll anchoring characteristic , That is, control the scrolling position not to shake with the change of content , Only in iOS Take effect , Android can refer to CSS `overflow-anchor` attribute .	2.8.2
refresher-enabled	boolean	false	no	Enable custom drop-down refresh	2.10.1
refresher-threshold	number	45	no	Set custom drop-down refresh threshold	2.10.1
refresher-default-style	string	"black"	no	Set custom dropdown to refresh the default style , Support settings `black \| white \| none`, none Indicates that the default style is not used	2.10.1
refresher-background	string	"#FFF"	no	Set custom drop-down refresh area background color	2.10.1
refresher-triggered	boolean	false	no	Set the current pull-down refresh status ,true Indicates that the pull-down refresh has been triggered ,false Indicates that the pull-down refresh is not triggered	2.10.1
bindscrolltoupper	eventhandle		no	Scroll to top / Trigger on the left	1.0.0
bindscrolltolower	eventhandle		no	Scroll to the bottom / Trigger on the right	1.0.0
bindscroll	eventhandle		no	Trigger when scrolling ,event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}	1.0.0
bindrefresherpulling	eventhandle		no	Custom dropdown refresh control is dropdown	2.10.1
bindrefresherrefresh	eventhandle		no	Custom pull down refresh triggered	2.10.1
bindrefresherrestore	eventhandle		no	Custom pull down refresh reset	2.10.1
bindrefresherabort	eventhandle		no	Custom pull down refresh aborted	2.10.1

Bug & Tip

tip: Base library 2.4.0 Nesting is not supported below textarea、map、canvas、video Components
tip: scroll-into-view Has a higher priority than scroll-top
tip: Rolling scroll-view Will prevent the page from bouncing , So in scroll-view Middle scroll , Can't trigger onPullDownRefresh
tip: To use pull-down refresh , Please use the page scroll , instead of scroll-view , You can also go back to the top of the page by clicking on the top status bar
tip: scroll-view Custom pull-down refresh can be combined WXS Event response Develop interactive animation

Example

wxml
<!-- scroll-view  Scrollable view area   When rolling vertically , Need to give scroll-view A fixed height  scroll-x  Allow horizontal scrolling  scroll-view  Child element settings of display:inline-block  Also for scroll-view  Set not to wrap  scroll-y  Allow vertical scrolling  scroll-view  Height must be set  -->
<view>------- Roll horizontally ------------------</view>
<scroll-view class="scrollview-x" scroll-x>
  <view>11</view>
  <view>22</view>
  <view>33</view>
  <view>11</view>
  <view>22</view>
  <view>33</view>
  <view>11</view>
  <view>22</view>
  <view>33</view>
</scroll-view>
<view>------- Roll vertically ------------------</view>
<scroll-view class="scrollview-y" scroll-y>
  <view>1</view>
  <view>2</view>
  <view>3</view>
  <view>4</view>
  <view>1</view>
  <view>2</view>
  <view>3</view>
  <view>4</view>
  <view>1</view>
  <view>2</view>
  <view>3</view>
  <view>4</view>
  <view>1</view>
  <view>2</view>
  <view>3</view>
  <view>4</view>
</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.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.

/* pages/03scrollview/03scrollview.wxss */
.scrollview-x{
  height: 200rpx;
  white-space: nowrap;
}
.scrollview-x view{
  display: inline-block;
  width: 300rpx;
  height: 200rpx;
  margin-right: 20rpx;
  background-color: burlywood;
  border: 1px solid red;
}

.scrollview-y{
  height: 800rpx;
}
.scrollview-y view{
  width: 300rpx;
  height: 200rpx;
  background-color: salmon;
  margin-bottom: 20rpx;
}
      1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.

Wechat applet scroll-view Component scrollable view area _scroll-view Wechat applet

Visual area scrolling menu case

Wechat applet scroll-view Component scrollable view area _ The drop-down refresh _02

<!--  Scrollable menu  -->
<view class="category">
	<scroll-view class="category-l" scroll-y>
		<view data-cate-id="cate1" bindtap="catepos"> mobile phone </view>
		<view data-cate-id="cate2" bindtap="catepos"> The computer </view>
		<view data-cate-id="cate3" bindtap="catepos"> The notebook </view>
		<view data-cate-id="cate4" bindtap="catepos"> furniture </view>
		<view data-cate-id="cate5" bindtap="catepos"> Articles </view>
		<view data-cate-id="cate6" bindtap="catepos"> Sheet </view>
	</scroll-view>
	<scroll-view class="category-r" scroll-y scroll-into-view="{{cateId}}">
		<view id="cate1" class="father">
			<view> List of goods </view>
			<view> mobile phone </view>
			<view> mobile phone </view>
		</view>
		<view id="cate2" class="father">
			<view> List of goods </view>
			<view> The computer </view>
			<view> The computer </view>
		</view>
		<view id="cate3" class="father">
			<view> List of goods </view>
			<view> The notebook </view>
			<view> The notebook </view>
		</view>
		<view id="cate4" class="father">
			<view> List of goods </view>
			<view> furniture </view>
			<view> furniture </view>
		</view>
		<view id="cate5" class="father">
			<view> List of goods </view>
			<view> Articles </view>
			<view> Articles </view>
		</view>
		<view id="cate6" class="father">
			<view> List of goods </view>
			<view> Sheet </view>
			<view> Sheet </view>
		</view>
	</scroll-view>
</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.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.

/* pages/04category/04category.wxss */
.category{
  display: flex;
}
.category .category-l{
  width: 160rpx;
  height: 250rpx;
  text-align: center;
  background-color: skyblue;
}
.category .category-l view{
  height: 60rpx;
  line-height: 60rpx;
  background-color: red;
  margin-bottom: 15rpx;
  color: white;
}
.category .category-r{
  flex: 1;
  height: 400rpx;
}

.category .category-r view{
  background-color: whitesmoke;
  margin-bottom: 20rpx;
}

      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.

//js
Page({

  /** *  Initial data of the page  */
  data: {
    cateId:''
  },
  catepos(e){
    console.log(e.currentTarget)
    let {cateId} = e.currentTarget.dataset
    this.setData({
      cateId
    })
  },
})
      1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.