preface

Develop a TAB component that can scroll. When you click a TAB larger than half of the screen, move it to the middle, click the down arrow to expand all, Github address vue version stamp here vue when better Scroll to achieve a similar effect

 

use

git clone https://github.com/sunnie1992/soul-weapp.git
Copy the code

Developer tools directly open and run components under s-tab-scoller in your directory

{"navigationBarTitleText": "horizontal scroll ", "usingComponents": {"s-tab-scoller": {"s-tab-scoller": {"s-tab-scoller": {"s-tab-scoller": { "/components/s-tab-scoller/index"}} WXML <s-tab-scoller list="{{list}}" bindchange="navChange"></s-tab-scoller>Copy the code

implementation

The component takes a list argument, and we have two arguments to display, title and quantity, which the developer can modify to suit his or her needs. Select TAB item triggers chooseNav method

// components/s-float-icons/index.js Component({ externalClasses: ['ex-class'], properties: { list: Array }, options: {multipleSlots: true}, data: {showNavDrap: false, navIndex: 0, navScrollLeft: 0}, { showAllNav() { this.setData({ showNavDrap: ! this.data.showNavDrap }) }, / / select chooseNav (e) {var item = urrentTarget of e.c. with our fabrication:. The dataset. Item var index = e.c. with our fabrication: urrentTarget. Dataset. The index var pop = E.c. with our fabrication: urrentTarget. Dataset. Pop/click pop-up option (pop to distinguish is to choose the scrolling TAB or the drop-down TAB) if (pop) {enclosing setData ({showNavDrap:! This.data.shownavdrap})} var _this = this // Set the current position const query = wx.createsElectorQuery ().in(this) query .selectAll('.label-item').boundingClientRect(function(rect) {let width = 0; i < index; I ++) {width += rect[I].width} Let clientWidth = wx.getSystemInfoSync().windowWidth / 2 if (width > clientWidth) {_this.setData({ navScrollLeft: width + rect[index].width / 2 - clientWidth }) } else { _this.setData({ navScrollLeft: Select this.setData({navIndex: index}) this.triggerEvent('change', item)}}).Copy the code

About me

For more technology-related articles, follow the public account “front-end girls juku”.

Return to front end to join “Front End Fairy Group”

You can scan and add the wechat below and note Sol plus exchange group, so that you can give me suggestions and exchange and learn.