更新记录

1.0.0（2025-04-02） 下载此版本

初始化组件

平台兼容性

cc-flightInfo

cc-popupX

cc-popup

uniapp专属精品组件页面模板（由前端组件开发出品）

●组件模板规划：

由前端组件开发出品的精品组件页面模板，将陆续发布，预计高达约几百种供您使用，是快速快发项目、创业的必备精品。 合集地址： uni-app组件模板合集地址：(https://ext.dcloud.net.cn/publisher?id=274945)

●组件模板费用：

学习：免费下载，进行学习，无费用；

使用/商用：本页面地址赞赏8元后（当前项目产生赞赏订单可追溯），可终身商用；

●组件模板使用版权/商用：8元

本组件模板免费下载可供学习，如需商用，请在本组件页面模板进行赞赏8元，不赞赏可能面临侵权！保留追究知识产权法律责任！ （仅需8元获取组件模板代码-物超所值，1个组件页面市场价约20-100元）

我的技术公众号(私信可加前端技术交流群)

群内气氛挺不错的，应该或许可能大概，算是为数不多的，专搞技术的前端群，偶尔聊天摸鱼

使用方法

<template>
    <view class="container">
        <!-- 头部导航 -->
        <view class="header">
            <view class="back-icon">
                <text class="iconfont">&#xe697;</text>
            </view>
            <view class="route">广州-郑州</view>
            <view class="calendar-btn" @tap="showCalendar">
                <text class="iconfont">&#xe8cf;</text>
            </view>
        </view>

        <!-- 日期选择 -->
        <view class="date-selector">
            <scroll-view 
                scroll-x 
                class="date-list" 
                :scroll-left="scrollLeft"
                :scroll-with-animation="true"
                @scroll=""
                :show-scrollbar="false"
                :enhanced="true"
                :bounces="true"
                ref="dateScroll"
            >
                <view class="date-list-content">
                    <view 
                        v-for="(date, index) in dates" 
                        :key="index"
                        :class="['date-item', date.selected ? 'selected' : '']"
                        @tap="selectDate(index)"
                        :id="'date-' + index"
                    >
                        <text class="day">{{date.day}}</text>
                        <text class="date">{{date.date}}</text>
                        <text v-if="date.price" class="price">¥{{date.price}}</text>
                    </view>
                </view>
            </scroll-view>

        </view>

        <!-- 航班列表 -->
        <scroll-view scroll-y class="flight-list">
            <view v-for="(flight, index) in flights" 
                :key="index" 
                :class="['flight-item', flight.isLowestPrice ? 'has-tag' : '']"
            >
                <view v-if="flight.isLowestPrice" class="price-tag">当日低价</view>
                <view class="flight-time">
                    <view class="depart">
                        <text class="time">{{flight.departTime}}</text>
                        <text class="airport">{{flight.departAirport}}</text>
                    </view>
                    <view class="duration">
                        <view class="arrow">→</view>
                        <text class="duration-text">{{flight.duration}}</text>
                    </view>
                    <view class="arrive">
                        <text class="time">{{flight.arriveTime}}</text>
                        <text class="airport">{{flight.arriveAirport}}</text>
                    </view>
                </view>
                <view class="flight-info">
                    <view class="airline">
                        <image :src="flight.airlineIcon" class="airline-icon" mode="aspectFit"></image>
                        <text>{{flight.flightNo}}</text>
                        <text class="shared" v-if="flight.shared">共享</text>
                    </view>
                    <text class="aircraft">{{flight.aircraft}}</text>
                    <text class="price">¥{{flight.price}}</text>
                </view>
            </view>
        </scroll-view>

        <!-- 底部工具栏 -->
        <view class="toolbar">
            <view class="tool-item active">
                <text class="iconfont">&#xe61a;</text>
                <text>筛选</text>
            </view>
            <view class="tool-item">
                <text>价格低-高</text>
            </view>
            <view class="tool-item">
                <text>出发时间</text>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                dates: [
                    { day: '日', date: '03-30', price: '' },
                    { day: '一', date: '03-31', price: '' },
                    { day: '二', date: '04-01', price: '' },
                    { day: '三', date: '04-02', price: '' },
                    { day: '四', date: '04-03', price: '647', selected: true },
                    { day: '五', date: '04-04', price: '' },
                    { day: '六', date: '04-05', price: '' },
                ],
                flights: [
                    {
                        departTime: '09:35',
                        arriveTime: '11:55',
                        departAirport: '白云T1',
                        arriveAirport: '新郑T2',
                        duration: '2h20m',
                        airlineIcon: '/static/airline/west.png',
                        flightNo: '西部航空PN6454',
                        aircraft: '空客321(中)',
                        price: '647',
                        shared: false,
                        isLowestPrice: true
                    },
                    {
                        departTime: '23:10',
                        arriveTime: '01:30',
                        departAirport: '白云T1',
                        arriveAirport: '新郑T2',
                        duration: '2h20m',
                        airlineIcon: '/static/airline/west.png',
                        flightNo: '西部航空PN6452',
                        aircraft: '空客321(中)',
                        price: '730',
                        shared: false,
                        isLowestPrice: false
                    },
                    {
                        departTime: '06:25',
                        arriveTime: '08:45',
                        departAirport: '白云T1',
                        arriveAirport: '新郑T2',
                        duration: '2h20m',
                        airlineIcon: '/static/airline/longjiang.png',
                        flightNo: '长龙航空GJ8583',
                        aircraft: '空客320(中)',
                        price: '751',
                        shared: false,
                        isLowestPrice: false
                    }
                ],
                scrollLeft: 0,
                itemWidth: 140, // 每个日期项的宽度（rpx）
                startDate: '2024-03-30',
                endDate: '2024-04-30'
            }
        },
        onLoad() {
            // 初始化时滚动到选中日期
            this.$nextTick(() => {
                const selectedIndex = this.dates.findIndex(date => date.selected);
                if (selectedIndex > -1) {
                    this.scrollToDate(selectedIndex);
                }
            });
        },
        methods: {
            selectDate(index) {
                this.dates.forEach((date, i) => {
                    date.selected = i === index;
                });
                this.scrollToDate(index);
            },
            scrollToDate(index) {
                // 获取屏幕宽度
                const systemInfo = uni.getSystemInfoSync();
                const screenWidth = systemInfo.windowWidth;
                // 将rpx转换为px
                const itemWidthPx = (this.itemWidth * screenWidth) / 750;

                // 计算目标滚动位置（使选中项居中）
                const targetScrollLeft = Math.max(0, (index * itemWidthPx) - (screenWidth - itemWidthPx) / 2);

                this.scrollLeft = targetScrollLeft;
            },
            (e) {
                // 记录滚动位置
                this.scrollLeft = e.detail.scrollLeft;
            },
            showCalendar() {

            }
        }
    }
</script>

<style>
    .container {
        min-height: 100vh;
        background-color: #f5f5f5;
        width: 100vw;
    }

    .header {
        position: relative;
        height: 88rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #fff;
    }

    .back-icon {
        position: absolute;
        left: 30rpx;
    }

    .route {
        font-size: 36rpx;
        font-weight: 500;
    }

    .date-selector {
        background-color: #fff;
        padding: 20rpx 0;
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;
    }

    .date-list {
        flex: 1;
        white-space: nowrap;
        position: relative;
    }

    .date-list-content {
        display: inline-flex;
        padding: 0 20rpx;
    }

    .date-item {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        width: 140rpx;
        padding: 20rpx 0;
        flex-shrink: 0;
    }

    .date-item.selected {
        background-color: #e4393c;
        color: #fff;
        border-radius: 12rpx;
    }

    .date-item .day {
        font-size: 24rpx;
    }

    .date-item .date {
        font-size: 28rpx;
        margin: 10rpx 0;
    }

    .date-item .price {
        font-size: 24rpx;
    }

    .calendar-btn {
        position: absolute;
        right: 30rpx;
        width: 80rpx;
        height: 80rpx;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .calendar-btn .iconfont {
        font-size: 40rpx;
        color: #666;
    }

    .flight-list {
        margin: 10px 0px;
    }

    .flight-item {
        background-color: #fff;
        border-radius: 12rpx;
        padding: 10px 10px;
        margin-bottom: 20rpx;
        position: relative;

    }

    .price-tag {
        position: absolute;
        top: -2rpx;
        left: -2rpx;
        padding: 8rpx 16rpx;
        background-color: #00b7ff;
        color: #fff;
        font-size: 20rpx;
        border-radius: 12rpx 0 12rpx 0;
        z-index: 1;
    }

    .flight-time {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 30rpx;
        margin-top: 20rpx;
        position: relative;
    }

    .flight-item.has-tag .flight-time {
        margin-top: 30rpx;
    }

    .depart, .arrive {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 200rpx;
    }

    .time {
        font-size: 40rpx;
        font-weight: 500;
    }

    .airport {
        font-size: 24rpx;
        color: #666;
        margin-top: 10rpx;
    }

    .duration {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex: 1;
        min-width: 160rpx;
    }

    .arrow {
        color: #999;
        margin-bottom: 10rpx;
    }

    .duration-text {
        font-size: 24rpx;
        color: #999;
    }

    .flight-info {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 24rpx;
        color: #666;
    }

    .airline {
        display: flex;
        align-items: center;
        flex: 1;
        min-width: 0;
    }

    .airline-icon {
        width: 40rpx;
        height: 40rpx;
        margin-right: 10rpx;
        flex-shrink: 0;
    }

    .airline text {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .aircraft {
        margin: 0 20rpx;
        flex-shrink: 0;
    }

    .shared {
        color: #ff9500;
        margin-left: 10rpx;
        flex-shrink: 0;
    }

    .price {
        color: #e4393c;
        font-size: 32rpx;
        font-weight: 500;
        flex-shrink: 0;
        min-width: 120rpx;
        text-align: right;
    }

    .toolbar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100rpx;
        background-color: #fff;
        display: flex;
        align-items: center;
        justify-content: space-around;
        border-top: 1rpx solid #eee;
    }

    .tool-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 24rpx;
        color: #666;
    }

    .tool-item.active {
        color: #e4393c;
    }
</style>