This is the second day of my participation in Gwen Challenge
preface
In the process of developing small programs, the official component Scroll view should be used in many places, today to take a look at the n common usage of this component.
The official introduction
Judah said documentation is a good thing! So when learning anything, the first thing we need to do is take a serious look at the official documentation, after all, a lot of things can be obtained from the documentation. Here is a screenshot of the official document as follows:
Two common bindScrolltoupper and BindScRolltolower are missing from the figure above
The first basic usage
This usage is also the most common and comes in two forms.
Fixed high rolling
Given a height, let the content display at this height, beyond can slide to display the content, here the height can be less than the page height, can be exactly the page height. The code is as follows:
<scroll view scroll y="true" class="demo-scroll block"> <view> <view> <view> </view> </view> </view> <view> </view> <view> </view> </view> </view> </view> </view> <view> </view> <view> </view> </view> </view> </view> </view> </view> </scroll-view>. Demo-scroll-block {width: 100%; height: 200rpx; }Copy the codeThe effect is as follows:
Set the pull-up update to load more
On the basis of the above is added up to load more and pull down to update data function. There are two official methods.
- Bindscrolltoupper: Triggered when scrolling to the top/left
- Bindscrolltolower: Triggered when scrolling to the bottom/right
There are two ways to scroll to the top, request the interface to update data, and scroll to the bottom to load the next page of data.
Second use: scroll left and right to navigate
The second usage is also very common in the process of making small programs, directly on the code:
<scroll-view scroll-x="true" class="demo-scroll-nav"> <view class="nav-wrapper"> <text class="{{navIndex == index ? 'active':''}}" wx:for="{{navArr}}" wx:key="unique" bindtap="navChange" data-index="{{index}}">{{item}}</text> </view> < / scroll view - > navArr: [' guide ', 'framework', 'components',' API 'and' server ', 'tools',' cloud development ', 'ability to scale', 'update log], navIndex: 0. navChange(e){ this.setData({ navIndex:e.currentTarget.dataset.index }) } .demo-scroll-nav { height: 80rpx; } .nav-wrapper { height: 100%; white-space: nowrap; } .nav-wrapper text { display: inline-block; padding: 0 20px; height: 100%; line-height: 80rpx; } .nav-wrapper text.active { color: #ff4400; }Copy the codeThe effect is as follows:
Third use: Quickly locate contacts
We often see this kind of usage in our daily life, such as the contact interface of mobile phone, some select address or country page have similar function. The scroll-into-view attribute in the scroll-view is mainly used, which is similar to the function of anchor points in web pages. Examples are as follows:
<scroll-view scroll-y="true" class="demo-scroll-filter" scroll-into-view="{{toView}}"> <view id="block0"> <view>A</view> Ali < / < view > view > < view > and < / view > < view > dog < / view > < view > ali < / view > < view > and < / view > < view > dog < / view > < view > < / view > ali < view > and < / view > < view > dog < / view > < view > < the view id = "block1" > < view > B < / view > < view > ali < / view > < view > and < / view > Dogs < view > o < / view > < view > ali < / view > < view > and < / view > < view > dog < / view > < view > ali < / view > < view > and < / view > < view > o < / view > dog Ali < / < view > view > < view > and < / view > < view > dog < / view > < view > ali < / view > < view > and < / view > < view > dog < / view > < / view > < the view Id = "block2" > < view > C < / view > < view > ali < / view > < view > and < / view > < view > dog < / view > < view > ali < / view > < view > o < / view > cat Dogs < view > o < / view > < view > ali < / view > < view > and < / view > < view > dog < / view > < / view > < the view id = "block3" > < view > D < / view > Ali < / < view > view > < view > and < / view > < view > dog < / view > < view > ali < / view > < view > and < / view > < view > dog < / view > < view > < / view > ali <view> <view> <view> </view> </view> </scroll-view> <view class="filter-nav"> <view bindTap ="toViewId" data-index="0">A</view> <view bindtap="toViewId" data-index="1">B</view> <view bindtap="toViewId" data-index="2">C</view> <view bindtap="toViewId" data-index="3">D</view> </view> Page({ data: { toView:'block0' }, toViewId(e){ this.setData({ toView:'block'+e.currentTarget.dataset.index }) }, }) .demo-scroll-filter { height: 100vh; } .filter-nav { position: fixed; right: 0; top: 20rpx; } .filter-nav view { padding: 40rpx; background: #ff4400; margin-top: 20rpx; }Copy the codeThe effect is as follows:
Fourth usage: Combine the second and third usage
This is done by clicking on the top navigation and scrolling to the right place on the next page. Don’t talk nonsense, directly on the code:
<scroll-view scroll-x="true" class="demo-scroll-nav"> <view class="nav-wrapper"> <text class="{{navIndex == index ? 'active':''}}" wx:for="{{navArr}}" wx:key="unique" bindtap="navChange" data-index="{{index}}">{{item}}</text> </view> </scroll-view> <scroll-view scroll-y="true" class="demo-scroll-filter" scroll-into-view="{{toView}}"> <view Id = "block {{index}}" wx: for = "{{navArr}}" wx: key = "unique" > < view > {{index}} < / view > < view > ali < / view > < view > and < / view > Dogs < view > o < / view > < view > ali < / view > < view > and < / view > < view > dog < / view > < view > ali < / view > < view > and < / view > < view > dog < / view > < / view > </scroll-view> Page({ data: {navArr: [' guide ', 'framework', 'components',' API 'and' server ', 'tools',' cloud development ', 'ability to scale', 'update log], navIndex: 0, toView:' block0 '}, navChange(e){ this.setData({ navIndex:e.currentTarget.dataset.index, toView:'block'+e.currentTarget.dataset.index }) }, }) .demo-scroll-nav { height: 80rpx; } .nav-wrapper { height: 100%; white-space: nowrap; } .nav-wrapper text { display: inline-block; padding: 0 20px; height: 100%; line-height: 80rpx; } .nav-wrapper text.active { color: #ff4400; } .demo-scroll-filter { height: calc( 100vh - 80rpx ); }Copy the codeThe effect is as follows:
Fifth use: left and right linkage
This is used for take-out, ordering, and mall projects. The effect is as follows:
<view class="main"> <view class="scroll-nav"> <view class="{{activeIndex == 0 ? 'active':''}}" bindtap="titleChange" data-index="0">1</view> <view class="{{activeIndex == 1 ? 'active':''}}" bindtap="titleChange" data-index="1">2</view> <view class="{{activeIndex == 2 ? 'active':''}}" bindtap="titleChange" data-index="2">3</view> <view class="{{activeIndex == 3 ? 'active':''}}" bindtap="titleChange" data-index="3">4</view> <view class="{{activeIndex == 4 ? 'active':''}}" bindtap="titleChange" data-index="4">5</view> </view> <view class="scroll-content"> <scroll-view scroll-y="true" style="height:100%" scroll-into-view="{{toView}}" scroll-with-animation="ture" bindscroll="scroll"> <view class="content-item" id="content0">1</view> <view class="content-item" id="content1">2</view> <view class="content-item" id="content2">3</view> <view class="content-item" id="content3">4</view> <view class="content-item" id="content4">5</view> </scroll-view> </view> </view> let distance = 0 Page({ data: { activeIndex:0, heightArr:[], toView:'content0' }, onLoad(){ let query = wx.createSelectorQuery(),self = this query.selectAll('.content-item').boundingClientRect((rect)=> { rect.forEach(ele => { self.calculateHeight(ele.height) }) }).exec(); }, titleChange(e){ this.setData({ activeIndex:e.currentTarget.dataset.index, toView: 'content'+e.currentTarget.dataset.index }) }, scroll(e){ if (this.data.heightArr.length == 0) { return } let scrollTop = e.detail.scrollTop let current = ActiveIndex this.data.activeIndex if (scrollTop >= this.distance) {// If the distance from the bottom to the top of the current visible area on the right exceeds the height of the current list selected items from the top (without subscripting out of bounds), Selected item updates the left side of the if (current + 1 ". This data. HeightArr. Length && scrollTop > = this. Data. HeightArr [current]) {enclosing setData ({ activeIndex: // If the distance from the bottom to the top of the current viewing area on the right is less than the height from the top of the current list selected items, For example, if (current-1 >= 0 && scrollTop < this.data.heightarr [current-1]) {this.setdata ({activeIndex: Current-1})}} // Update the distance to the top this.distance = scrollTop}, // calculateHeight(height) {if(! this.data.heightArr.length) { this.data.heightArr.push(height) }else { this.data.heightArr.forEach(ele => { height += ele }) this.data.heightArr.push(height); } } }) .main{ height: 100vh; display: flex; } .scroll-nav{ width: 20%; } .scroll-nav view{ text-align: center; padding: 20rpx 0; } .scroll-nav view.active{ background: #ff4400; } .scroll-content{ flex: 1; } .content-item{ height: 600rpx; }Copy the codeIn the example above, the navigation on the left is directly using View. If there is a lot of content here, you can also use Scroll View to implement it. I’ll leave it to you to implement it yourself.
conclusion
There are many usages of scrollvew, currently only these methods are used in my actual project, if you have more methods, welcome to leave a message below to discuss oh.