“This is the 12th day of my participation in the Gwen Challenge in November. See details of the event: The Last Gwen Challenge 2021”.

preface

Last time we talked about the overall idea and metrics, let’s take a look at the implementation. Through this chapter we can learn: 1. Flex layout. CreateSelectorQuery () application.

DOM

It’s very simple nothing to say, just the following. 1. It is mainly divided into scroll sliding and non-sliding.
Very simple: Transition. Coordinate movement currently uses the simplest left. Look at the code:

<template> <view> <view class="scroll-view-x" v-if="scroll"> <view :id="'the-' + index" v-for="(item, index) in option" :key="item.id" class="scroll-view-item " @tap="calculator(index)"> <slot name="scroll" :item="item" :active="idx == index"> <! - backup content - > {{item. The name}} < / slot > < / view > < the view class = "link - p:" style = "{width: ${width} ` upx `, background: colour, left: `${LeftPx}px`, transition: `left ${sec}s ease-in-out` }"></view> </view> <view class="scroll-view-x no-scroll" v-else> <view :id="'the-' + index" v-for="(item, index) in option" :key="item.id" class="scroll-view-item " @tap="calculator(index)"> <slot :item="item" :active="idx == index"> <! - backup content - > {{item. The name}} < / slot > < / view > < the view class = "link - p:" style = "{width: ${width} ` upx `, background: colour, left: `${LeftPx}px`, transition: `left ${sec}s ease-in-out` }"></view> </view> </view> </template>Copy the code

css

The most important part of the felx layout is its context-content: space-between; Use of attributes. Through it, content can be automatically adapted. If you are not familiar with Flex, you can check out the Flex layout syntax tutorial, which is clearly illustrated. Ok, look at the code:

<style scoped> .scroll-view-x { display: flex; flex-direction: row; height: 88upx; white-space: nowrap; width: 100%; background-color: #ffffff; box-sizing: border-box; position: relative; justify-content: space-between; overflow: auto; } .no-scroll{ overflow: hidden; } .scroll-view-x .scroll-view-item { display: inline-block; text-align: center; font-size: 30upx; padding: 0 25upx; color: #787878; height: 88upx; line-height: 88upx; } .scroll-view-x .tapitem { color: #ff8c39; position: relative; } .scroll-view-x .link-p { position: absolute; height: 5upx; border-radius: 4upx; bottom: 10upx; The transition: left 0.25 s ease - in-out; width: 40upx; background: rgba(243, 152, 0, 1); } .scroll-view-x .link-p .link { display: block; margin: 0 auto; height: inherit; border-radius: 4px; } </style>Copy the code

Script part

This part is divided into two parts: 1. Determination of props. As we said yesterday when designing, it is ok to determine the type. 2. Because our content is uncertain and unequal in width, we need to obtain the location information of the node. We use uni.createsElectorQuery () on our side. Don’t know yet we view the link. BoundingClientRect (callback) is used to obtain node location information. We’ll just keep it. Note: Note that the second node fetch is in this.$nextTick. 3, by clicking the option of the event, we change the capsule LeftPx parameter value is done, actually quite simple. Look at the code:

Export default {name: 'duNav', props: {/** * whether to slide */ scroll: {type: Boolean, default: True}, /** * Style type */ classType: {type: [Number], default: 0}, /** * capsule speed */ SEC: {type: [Number, String], default: Width: {type: [Number, String], default: 40}, /** * color: {type: String, default: 40}, /** * color: {type: String, default: 40}, /** * color: {type: String, default: 40}, /** * color: {type: String, default: 'rgba (243, 152, 0, 1)'}, options / * * * * / option: {type: (Array), default: (a) = > [{name: 'all'}}}], the data () {return {LeftPx independence idx: 0:0}; }, created() { this.initialPra(); }, methods: { initialPra() { this.$nextTick(() => { for (let i in this.option) { const query = uni.createSelectorQuery().in(this); query .select('#the-' + i) .boundingClientRect(data => { let { left, width } = data; this.option[i].left = left; this.option[i].width = data.width; if (Number(i) === 0) { this.LeftPx = this.option[0].width / 2 - this.width / 4; } }) .exec(); }}); }, calculator(i) { let initial = this.option[0].left; let left = this.option[i].left; let width = this.option[i].width; this.idx = i; this.LeftPx = left + width / 2 - this.width / 4 - initial; this.$emit('feedback', i); }}}; </script>Copy the code

At the end

At this point, a complete navigation bar menu is realized. Code download stamp link! If you also want to develop your own plugin for yourself and others to use can check out the tutorial!