With the development of technology, the complexity of development is getting higher and higher. The traditional development method makes a system into a whole application. It often happens that a small change or the addition of a small function may cause the overall logic to change. The modification affects the whole body. Through component development, individual development and maintenance can be effectively achieved, and they can be combined at will. Greatly improve low development efficiency and reduce maintenance costs.
Componentization is the only way for any front-end application with complex business scenarios and products after multiple iterations. Componentization requires more than just the module splitting and decoupling seen on the surface. There is also a lot of work behind it to support componentization, such as module splitting strategies based on business characteristics, interaction methods between modules, and building systems. etc.
The components introduced in this article are:
The front-end vue can scroll left and right to switch tabs tabs with sliding animation effect and automatic width. To download the complete code, please visit https://ext.dcloud.net.cn/plugin?id=13003
For more information on front-end components, please follow the WeChat public account: Front-end component development
The rendering is as follows:
#### Instructions
```How to use
swiperTabList: ["2023-06-10","2023-06-11","2023-06-12","2023-06-13","2023-06-14","2023-06-15" ], //Navigation list
swiperTabIdx: 0,
swiperColor: '#161616', //The color of the navigation bar font before it is selected
swiperCurrentColor: '#1D63FF', //Select the current navigation bar font color
curSwiperWidth: '26%', //The width of the current navigation % upx rpx px (the navigation can be slid left and right if it exceeds the limit)
curSwiperHeight: 96, //Height of current navigation rpx px
curSwiperLineShow: true, //Whether to display the lines of the navigation bar (if the lines are too close to the title, you can modify the css of .swiperLine)
curSwiperLineActiveBg: '#1D63FF', //The color of the currently selected navigation bar line
curSwiperLineActiveWidth: '60%', //The width of the currently selected navigation bar line upx rpx px
curSwiperLineActiveHeight: '2px', //The height of the currently selected navigation bar line upx rpx px
<!--Component-->
<ccSwiperTabs :swiperTabList='swiperTabList' :swiperTabIdx='swiperTabIdx'
:curSwiperWidth='curSwiperWidth' :curSwiperHeight='curSwiperHeight' :swiperColor='swiperColor'
:swiperCurrentColor='swiperCurrentColor' :curSwiperLineShow="curSwiperLineShow"
:curSwiperLineActiveWidth="curSwiperLineActiveWidth" :curSwiperLineActiveHeight="curSwiperLineActiveHeight"
:curSwiperLineActiveBg="curSwiperLineActiveBg"
@change="CurrentTab">
</ccSwiperTabs>
```
#### HTML code part
```html
<template>
<view class="content">
<!--Component-->
<ccSwiperTabs :swiperTabList='swiperTabList' :swiperTabIdx='swiperTabIdx'
:curSwiperWidth='curSwiperWidth' :curSwiperHeight='curSwiperHeight' :swiperColor='swiperColor'
:swiperCurrentColor='swiperCurrentColor' :curSwiperLineShow="curSwiperLineShow"
:curSwiperLineActiveWidth="curSwiperLineActiveWidth" :curSwiperLineActiveHeight="curSwiperLineActiveHeight"
:curSwiperLineActiveBg="curSwiperLineActiveBg"
@change="CurrentTab">
</ccSwiperTabs>
<!-- radioData: radio selection data curIndex: current selection sequence @change: radio selection event -->
<ccRadioView :radioData="items" :curIndex="current" @change="radioChange"></ccRadioView>
<button class="submitBtn" type="primary" @click="submitAppointment">Submit appointment</button>
</view>
</template>
```
#### JS code (introducing components to fill in data)
```javascript
<script>
import ccSwiperTabs from '../../components/ccSwiperTabs.vue'
import ccRadioView from '../../components/ccRadioView.vue'
export default {
components: {
ccSwiperTabs,
ccRadioView
},
data() {
return {
swiperTabList: ["2023-06-10","2023-06-11","2023-06-12","2023-06-13","2023-06-14","2023-06-15" ], //Navigation list
swiperTabIdx: 0,
swiperColor: '#161616', //The color of the navigation bar font before it is selected
swiperCurrentColor: '#1D63FF', //Select the current navigation bar font color
curSwiperWidth: '26%', //The width of the current navigation % upx rpx px (the navigation can be slid left and right if it exceeds the limit)
curSwiperHeight: 96, //Height of current navigation rpx px
curSwiperLineShow: true, //Whether to display the lines of the navigation bar (if the lines are too close to the title, you can modify the css of .swiperLine)
curSwiperLineActiveBg: '#1D63FF', //The color of the currently selected navigation bar line
curSwiperLineActiveWidth: '60%', //The width of the currently selected navigation bar line upx rpx px
curSwiperLineActiveHeight: '2px', //The height of the currently selected navigation bar line upx rpx px
items: [{
value: '1',
name: '9:00-10:00 am'
},
{
value: '2',
name: '10:00-11:00am',
checked: ''
},
{
value: '3',
name: '11:00-12:00',
},
{
value: '4',
name: '13:00-14:00 PM',
},
{
value: '5',
name: '14:00-15:00 PM',
},
{
value: '6',
name: '15:00-16:00',
},
{
value: '7',
name: '16:00-17:00 PM',
},
{
value: '8',
name: '17:00-18:00 PM',
},
],
current: 0,
}
},
onLoad() {
},
methods: {
submitAppointment(){
uni.showModal({
title:'Reservation data',
content:"Date selection=" + this.swiperTabList[this.swiperTabIdx] + "Time period selection=" + this.items[this.current].name
})
},
//tab click event completes the code required by itself
CurrentTab: function(index, item) {
this.swiperTabIdx = index;
console.log('date selection' + item + '\nsequence' + index)
},
radioChange: function(evt) {
for (let i = 0; i < this.items.length; i++) {
if (this.items[i].value === evt.target.value) {
this.current = i;
break;
}
}
},
}
}
</script>
```
#### CSS
```css
<style>
.content {
display: flex;
flex-direction: column;
}
.submitBtn {
width: 90%;
margin-top: 86rpx;
}
</style>
```