当前位置: 首页 > news >正文

uni-app 途径站点组件开发与实现分享

在移动应用开发中,涉及到出行、物流等场景时,途径站点的展示是一个常见的需求。本文将为大家分享一个基于 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 途径站点组件。该组件具有良好的通用性和可扩展性,能够满足不同场景下的需求。希望本文的分享能对大家有所帮助,如果你有更好的想法或建议,欢迎在评论区交流讨论。

http://www.dtcms.com/a/272733.html

相关文章:

  • 体积超过2MB?uniapp小程序分包上传
  • [论文阅读]Text Compression for Efficient Language Generation
  • Go语言包管理完全指南:从基础到最佳实践
  • BM12 单链表的排序
  • 东土科技智能塔机系统亮相南京,助力智能建造高质量发展
  • HOOK专题
  • web前端面试笔记
  • 北京一家IPO业绩持续性存疑,关联交易频繁独立性堪忧
  • 24、企业设备清单管理(Equipment)详解:从分类到管理,设备全生命周期把控
  • etf期权到期的风险大不大怎么看?
  • MySQL中使用GROUP_CONCAT数据丢失问题的原因和处理方案
  • 深入理解区块链 | 去中心化架构与密码学保障
  • springboot数据脱敏(接口级别)
  • Uni-app 生命周期与钩子:程序的“生命”旅程
  • 企业电商平台搭建:ZKmall开源商城服务器部署与容灾方案
  • Spring--04--1--AOP自定义注解,记录用户操作日志
  • 第35周—————糖尿病预测模型优化探索
  • 网络资源模板--基于Android Studio 实现的健身系统App
  • 什么是缺陷?如何描述一个缺陷?
  • gitlab+TortoiseGit克隆生成ppk方式
  • 二分查找篇——寻找旋转排序数组中的最小值【LeetCode】
  • 数学建模-
  • leetcode 3439. 重新安排会议得到最多空余时间 I 中等
  • 征程 6M 部署 Omnidet 感知模型
  • Spark伪分布式集群搭建(Ubuntu系统)
  • 查看uniapp 项目中没有用到依赖
  • CanOpen转EtherCAT网关与台达伺服的配置指南配置软件篇
  • Rust Web 全栈开发(三):使用 Actix 构建简单的 Web Service
  • 【解决方案】基于 Amazon CloudFormation 打造三层 Web 应用架构实战
  • GitHub信息收集