Con el desarrollo de la tecnología, la complejidad del desarrollo es cada vez más alta. El método de desarrollo tradicional convierte un sistema en una aplicación completa. A menudo sucede que un pequeño cambio o un pequeño aumento de función puede hacer que la lógica general cambie. Modificaciones, haciendo que todo el cuerpo se vea afectado por un solo cabello.
A través del desarrollo de componentes, el desarrollo y el mantenimiento por separado se pueden realizar de manera efectiva y se pueden combinar a voluntad. Mejore en gran medida la eficiencia del desarrollo y reduzca los costos de mantenimiento.
Hoy presentaré un componente de la barra de título de la barra de pestañas de las pestañas de la barra de noticias de desplazamiento gratuito personalizado de Vue front-end; la dirección de descarga del código fuente se adjunta : https://ext.dcloud.net.cn/plugin?id=13615
Las representaciones son las siguientes:
[Falló la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo de enlace antirrobo, se recomienda guardar la imagen y cargarla directamente (img-ZCf2b3bw-1689545537432) (https://p3-juejin.byteimg.com/ tos-cn-i-k3u1fbpfcp /c84a531bf13141bd87bd4f1594d5e40b~tplv-k3u1fbpfcp-zoom-1.imagen)]
cc-noticias
Instrucciones
<!-- tabArr：tab数组 tabChange：标签栏切换 -->
<cc-newsTabs :tabArr="tabArr" @tabChange="tabChange"></cc-newsTabs>
//初始化数据
tabArr: [{
name: '关注',
id: '1',
},
{
name: '推荐',
id: '2'
},
{
name: '体育',
id: '3'
},
{
name: '热点',
id: '4'
},
{
name: '财经',
id: '5'
},
{
name: '娱乐',
id: '6'
},
{
name: '军事',
id: '7'
},
{
name: '历史',
id: '8'
},
{
name: '本地',
id: '9'
}],
// tab标签栏改变事件
tabChange(currentIndex) {
uni.showModal({
title: "当前选择序列",
content: "当前选择序列 = " + currentIndex
})
}
Parte de implementación del código HTML
<template>
<view class="content">
<!-- tabArr：tab数组 tabChange：标签栏切换 -->
<cc-newsTabs :tabArr="tabArr" @tabChange="tabChange"></cc-newsTabs>
</view>
</template>
<script>
export default {
data() {
return {
tabArr: [{
name: '关注',
id: '1',
}, {
name: '推荐',
id: '2'
}, {
name: '体育',
id: '3'
}, {
name: '热点',
id: '4'
}, {
name: '财经',
id: '5'
}, {
name: '娱乐',
id: '6'
}, {
name: '军事',
id: '7'
}, {
name: '历史',
id: '8'
}, {
name: '本地',
id: '9'
}],
}
},
methods: {
tabChange(currentIndex) {
uni.showModal({
title: "当前选择序列",
content: "当前选择序列 = " + currentIndex
})
}
}
}
</script>
<style>
page,
.content {
background-color: #f8f8f8;
height: 100%;
overflow: hidden;
}
</style>