テクノロジーの発展に伴い、開発の複雑さはますます高くなっており、従来の開発手法ではシステムをアプリケーション全体として構築していましたが、小さな変更や小さな機能の増加により全体のロジックが変更されることがよくありました。一本の髪の毛によって全身が影響を受けてしまいます。
コンポーネント開発により、個別の開発と保守を効果的に実現でき、それらを自由に組み合わせることができます。開発効率を大幅に向上させ、メンテナンスコストを削減します。
今日はコンポーネント フロントエンド Vue カスタム フリー スクロール ニュース バー タブ タブ タブ バー タイトル バー コンポーネントを紹介します。ソース コードのダウンロード アドレスは https://ext.dcloud.net.cn/plugin?id=13615 に添付されています。
レンダリングは次のとおりです。
[外部リンク画像の転送に失敗しました。ソース サイトには盗難防止リンク メカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします (img-ZCf2b3bw-1689545537432)(https://p3-juejin.bytaimg.com/) tos-cn-i-k3u1fbpfcp /c84a531bf13141bd87bd4f1594d5e40b~tplv-k3u1fbpfcp-zoom-1.image)]
cc-newsタブ
説明書
<!-- 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
})
}
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>