preface

A lot of small programs, APP have this design:

Effect 1. Fix the navigation bar at the top of the page.

Effect 2. Click the navigation bar, and the page will automatically scroll to the corresponding content position.

Effect 3. The scroll page will automatically switch to the corresponding navigation bar

Effect demonstration:

Code: WXML

<! > <view class="topView"> <scroll view class="tabs" scroll x="true" scroll -animation='true' scroll-into-view="x{{xId}}"> <view class="tab {{xId==item.id? 'greenColor':''}}" wx:for="{{list}}" wx:key="item" data-id="{{item.id}}" catchtap="changeTab" id="x{{item.id}}"> <view class="tab_text">{{item.title}}</view> <view class="tab_line {{xId==item.id? 'greenBg':''}}"></view> </view> </scroll-view> </view> <view style="height:80rpx"></view> <! > <scroll-view class=" Columns "scroll-y="true" scroll-with-animation='true' scroll-into-view="f{{yId}}" style='height:{{height}}rpx; ' bindscroll="scrollFloor"> <view class="column " wx:for="{{list}}" wx:key="item" id="f{{item.id}}"> <view class="column_title">{{item.title}}</view> <view class="column_imgs"> <view class="img_div" wx:for="{{item.photo}}" wx:for-item="items" wx:key="items"> <image src="{{items}}" mode="aspectFill"></image> </view> <view class="img_div" Wx: if = "{{item. Photo. Length > 7}}" > < the view class = "showMore" > click < / view > view more < / view > < / view > < / view > < the view style="height:200rpx"></view> </scroll-view>

Attribute explanation:

Scroll -x=”true” : allows horizontal scrolling, whereas scroll-y=”true” allows vertical scrolling.

Scroll with-animation: Whether animation transitions are used when setting the scroll bar position.

Scroll into-view: Scroll to which element (id=”x{{item.id}}” or id=”f{{item.id}}”, scroll to the element in any direction).

BindScroll: The event that fires when the content is scrolled.

wxss

.greenColor { color: rgb(59 185 80); } .greenBg { background-color: rgb(59 185 80); } .topView { position: fixed; top:0rpx; left:0rpx; z-index:999; width:100%; background-color: #fff; height: 80rpx; } /* navigation TAB */. Tabs {white-space: nowrap; padding-left: 32rpx; width: 100%; overflow: hidden; } /* hide scrollbar */ ::webkit-scrollbar {width: 0; height: 0; color: #fff; display: none; } .tabs .tab { display: inline-block; padding-right: 50rpx; } .tab_text { height: 50rpx; line-height: 50rpx; padding-bottom: 10rpx; } .tab_line { margin: 0 auto; width: 30rpx; height: 5rpx; } /* scroll content */. Column {width: 100%; box-sizing: border-box; overflow: hidden; } .column .column_title { padding: 40rpx 32rpx 0rpx 32rpx; } .column .column_imgs { padding: 0 28rpx; overflow: hidden; margin-top: 15rpx; } .column_imgs .img_div { width: 230rpx; height: 190rpx; padding: 7rpx 7rpx; box-sizing: border-box; float: left; display: -webkit-flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; } .column_imgs .img_div image { width: 100%; height: 100%; background: #b5b5b5; } .column_imgs .img_div .showMore { width: 100%; height: 100%; background: #f3f5f8; line-height: 190rpx; text-align: center; font-size: 28rpx; color: #0f0d6b; }

js

Page({data: {height: 0, // height: 0, RPX ratio: 0, // RPX,px conversion ratio: xId: 1, // X-axis selected item yId: 1, // Y-axis scroll position heightArray: [], list: heightArray: [], list: [{id: 1, the title: "characteristics", photo: [" image url ", "image url", "image url"],}, {id: 2, the title: "real estate", photo: [" image url ", "image url"],}, {id: 3, the title: "home", photo: [" image url ", "image url"],}, {id: 4, the title: "peripheral", the photo: [" image url ", ""],}, {id: 5, the title:" sales office ", photo: [" image url ", "image url"],}, {id: 6, the title: "property certificate", photo: }, onLoad: function (options) {let that = this wx.setNavigationBarTitle({title: 'page'}) //1. Wx.getSystemInfo ({success: function (res) { let width = res.windowWidth let ratio = 750 / width let height = ratio * res.windowHeight That. setData({height: height, // Unit RPX ratio: ratio})})}, onShow: function () {let that = this, heightArray = []; -y setTimeout(function () {let query = wx.createSelectorQuery()) // create a node query query.selectAll('.column').boundingClientRect(function (rect) { rect.forEach(function (value) { HeightArray. Push ((value.top - (170 / that.data.ratio))})}) that.setData({heightArray})}).exec()}, 1000) // It is best to use a delay here, Otherwise, the result may be null, or the value may be incorrect. }, // toggle the TAB navigation bar changeTab: function (e) { let that = this let id = e.currentTarget.dataset.id that.setData({ xId:id, yId:id, }) }, // listen for scrolling toggle Tab ScrollFloor: Function (e) {var that = this var scrollTop = e.detail.scrollTop // heightArray = that.data.heightArray Var id = null for (let I = 0; i <= heightArray.length; i++) { if (scrollTop >= heightArray[i] - 90 && scrollTop < heightArray[i + 1]) { id = that.data.list[i].id } } that.setData({ xId: id }) }, })

Train of thought

Effect 1 navigation bar levitation: parent box class=”topView” wrapped scroll view navigation bar, parent box style property. TopView {position: fixed; top:0rpx; left:0rpx; z-index:999; width:100%; background-color: #fff; height: 80rpx; } Note: 1. Z-index improves the hierarchy to avoid being covered by scrolling content. 2. The width must be set, otherwise the top TAB bar will not be able to slide left and right. 3. Scroll view component using: white-space: nowrap; overflow: hidden; And its child elements are set to: display: inline-block;

Effect 2 Click the navigation bar and the page will automatically scroll to the corresponding content position:



The navigation bar binds to the changeTab event and passes the id value of the current TAB element to the event via data-id, changing the xId (navigation bar selection) and yId (scroll content selection) values.

Effect 3 The scroll page automatically switches to the corresponding navigation bar:



1, When the page onLoad gets the page height and assigns the value to the scroll view style: height property.

OnShow fetches the distance from the top of the child elements in the scroll view and saves it in turn in the heightArray array.

If scrollTop is between heightArray[I] and heightArray[I +1], scrollTop is between heightArray[I] and heightArray[I +1], The page has scrolled to the I element, assigning the id of the I element to the xId.

Summary above is my understanding and implementation of this function, the code has been given, you have questions or have other solutions, welcome to discuss!!