在移動應用開發中，涉及到出行、物流等場景時，途徑站點的展示是一個常見的需求。本文將為大家分享一個基于 uni-app 開發的途徑站點組件，該組件能夠清晰展示路線中的各個站點信息，包括站點名稱、到達時間、是否已到達等狀態，希望能為有類似需求的開發者提供一些參考。

效果圖

組件功能與設計思路

組件功能

這個途徑站點組件主要實現了以下功能：

• 按順序展示路線中的所有途徑站點；

• 顯示每個站點的名稱、到達時間；

• 通過不同的樣式區分已到達站點、當前所在站點和未到達站點；

• 支持點擊站點查看詳細信息。

設計思路

為了實現上述功能，我們采用了以下設計思路：

• 采用垂直列表的形式展示站點，通過連接線將各個站點串聯起來，直觀體現路線的連貫性；

• 使用不同的顏色和圖標來區分站點的不同狀態，已到達站點采用綠色圖標和灰色文字，當前所在站點采用藍色圖標和黑色文字，未到達站點采用灰色圖標和淺灰色文字；

• 將組件拆分為站點列表和站點項兩個部分，提高代碼的復用性和可維護性；

• 通過 props 接收外部傳入的站點數據和相關配置，使組件具有更好的通用性。

組件實現步驟

1. 頁面結構設計（template）

首先，我們來設計組件的頁面結構。組件主要由站點列表容器和每個站點項組成，站點項中包含站點圖標、站點信息和連接線。

<template><view class="route-point"><view class="bus-itinerary"><view class="title">巴士行程</view><text class="iconfont icon-guanbi" @click="onClose"></text><view class="station-list"><block v-for="(item, index) in stationList" :key="index"><view v-if="index == startIndex" class="station-item start-station"><view class="station-name"><view class="text">北京豐臺站</view><view class="tips">您在該點上車</view></view><view class="time">預計08:00出發</view></view><view v-else-if="index == destIndex" class="station-item  dest-station"><view class="station-name"><view class="text">上海虹橋站</view><view class="tips">您在該點下車</view></view><view class="time">預計08:00到達</view></view><view v-else-if="index == startIndex + 1" class="station-item"><view class="station-name" @click="onFlod"><view style="color: #333333;" class="text">途徑5個站點<text class="iconfont icon-xiala"></text></view></view></view><view v-else class="station-item" :style="{color:index > startIndex ? '#333333' : '#999999'}"><view class="station-name">蘇州北站</view><view class="time">預計08:00{{ index > destIndex ? '到達' : '出發' }}</view></view></block><view class="point-list"><block v-for="(item, index) in stationList" :key="index"><view class="point"><view class="dot"></view><view v-if="index != stationList.length - 1" class="line"></view></view></block></view></view></view></view>
</template>

2. 樣式設計（style）

接下來，我們為組件設計樣式，使其具有良好的視覺效果。

<style lang="less" scoped>.route-point {width: 100%;height: 100%;background-color: rgba(0, 0, 0, .3);overflow: hidden;position: fixed;top: 0;left: 0;.bus-itinerary {position: absolute;left: 0;bottom: 0;width: 100%;background-color: #ffffff;overflow: hidden;padding: 40rpx;border-radius: 30rpx 30rpx 0 0;.title {font-weight: bold;font-size: 32rpx;margin-bottom: 20rpx;}.icon-guanbi {font-size: 40rpx;font-weight: bold;position: absolute;top: 30rpx;right: 40rpx;}.station-list {max-height: 50vh;overflow-y: scroll;padding-left: 40rpx;position: relative;.station-item {height: 100rpx;display: flex;align-items: center;font-size: 30rpx;color: #999999;.station-name {flex: 1;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;.text {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;.icon-xia {margin-left: 10rpx;font-weight: bold;}}}.time {flex-shrink: 0;}.tips {font-size: 26rpx;font-weight: 400;}}.start-station {font-weight: bold;color: #40ABDE;}.dest-station {font-weight: bold;color: #F7A22A;}.point-list {position: absolute;top: 42rpx;left: 10rpx;display: flex;flex-direction: column;align-items: center;.point {flex-shrink: 0;height: 100rpx;display: flex;flex-direction: column;align-items: center;.dot {flex-shrink: 0;width: 14rpx;height: 14rpx;background-color: #D7D7D7;border-radius: 50%;}.line {flex-shrink: 0;width: 2rpx;height: 70rpx;background-color: #999999;opacity: 0.2;}}}}}}
</style>

3. 邏輯實現（script）

最后，我們實現組件的邏輯部分，包括接收外部數據、處理點擊事件等。

<script>export default {name: "route-point",data() {return {stationList: [1, 2, 3, 4, 5, 6],startIndex: 2,destIndex: 4,isFold: true,};},methods: {onFlod() {this.isFold = !this.isFold;console.log("是否折疊站點：", this.isFold)if (this.isFold) {this.stationList = [1, 2, 3, 4, 5, 6];this.destIndex = 4;} else {this.stationList = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];this.destIndex = 8;}},onClose() {this.$emit('onClose')}}}
</script>

組件使用示例

在頁面中使用該組件時，只需引入組件并傳入站點數據即可。

<template><view class="container"><view @click="showRoutePoint = true">顯示組件</view><RoutePoint v-if="showRoutePoint" @onClose="onClosePoint"></RoutePoint></view>
</template><script>import RoutePoint from '../../components/route-point.vue';export default {components: {RoutePoint},data() {return {showRoutePoint: true,}},onLoad() {},methods: {onClosePoint() {this.showRoutePoint = false;},}}
</script><style lang="scss" scoped></style>

通過以上步驟，我們完成了一個功能完善的 uni-app 途徑站點組件。該組件具有良好的通用性和可擴展性，能夠滿足不同場景下的需求。希望本文的分享能對大家有所幫助，如果你有更好的想法或建議，歡迎在評論區交流討論。