（12）山东大学项目创新实训第十七周——游玩攻略界面前后端实现

在这篇博客中，我将介绍如何实现一个游玩攻略小程序界面，包括游客须知、服务设施和交通攻略三个主要部分。

1.界面功能

页面主要包括游客须知、服务设施、交通攻略。其中游客须知包括开放时间、优待政策。

①在整个页面中可以滑动查看，

②点击上方的标签进行滑动跳转。

③优待政策的表格也可以滑动下拉。

④服务设施部分通过点击不同的服务设施来查看详细信息。

2.交互效果

当用户点击不同的标签时，小程序会根据设置的toView值，自动滚动到相应的内容区域。这一功能使得用户在浏览不同信息时更加便捷和直观，不需要手动滑动大量内容即可快速定位到需要查看的部分。

3.前端实现

前端页面使用WeChat小程序的WXML和WXSS进行实现，包括标签页、滑动内容和表格显示。

wxml中适用scroll-view来实现页面滑动和tabs实现标签跳转定位。

    <view class="tabs">
        <view class="tab {{currentTab == 0 ? 'active' : ''}}" bindtap="switchTab" data-index="0">游玩须知</view>
        <view class="tab {{currentTab == 1 ? 'active' : ''}}" bindtap="switchTab" data-index="1">服务设施</view>
        <view class="tab {{currentTab == 2 ? 'active' : ''}}" bindtap="switchTab" data-index="2">交通攻略</view>
    </view>
    <scroll-view scroll-y="true" class="content" scroll-into-view="{{toView}}">
        <!-- 游玩须知部分 -->
        <view id="section0" class="section">          

在本篇游玩攻略小程序的开发过程中，实现了通过滑动查看详细信息以及通过点击标签进行快速跳转的功能。接下来，将详细分析这些功能的实现原理和步骤。

滑动查看详细信息

滑动查看详细信息是通过微信小程序中的scroll-view组件实现的。scroll-view组件允许用户在容器内进行垂直或水平滚动，从而查看超出视窗范围的内容。在我们的实现中，详细信息部分被放置在scroll-view组件内，用户可以通过垂直滑动查看完整的内容。

• scroll-view组件: 设置scroll-y="true"属性，使内容可以在垂直方向上滚动。
• class="content": 定义滚动容器的样式。
• scroll-into-view="{{toView}}": 通过绑定toView属性，实现快速跳转到指定的内容区域。
• 内容区域: 每个部分的内容都放在一个view标签内，并设置唯一的id（如section0、section1等），方便通过scroll-into-view属性进行定位。

点击标签进行快速跳转

为了实现点击标签快速跳转到相应的内容区域，我们需要结合scroll-view组件的scroll-into-view属性和标签的点击事件。点击标签时，我们将scroll-into-view的值设置为对应内容区域的id，从而实现快速跳转的效果。

wxml:

<view class="tabs">
    <view class="tab {{currentTab == 0 ? 'active' : ''}}" bindtap="switchTab" data-index="0">游玩须知</view>
    <view class="tab {{currentTab == 1 ? 'active' : ''}}" bindtap="switchTab" data-index="1">服务设施</view>
    <view class="tab {{currentTab == 2 ? 'active' : ''}}" bindtap="switchTab" data-index="2">交通攻略</view>
</view>

js: 

Page({
    data: {
        currentTab: 0,
        toView: 'section0'
    },

    switchTab(event) {
        const index = event.currentTarget.dataset.index;
        this.setData({
            currentTab: index,
            toView: `section${index}`
        });
    }
});

4.后端实现

后端使用Flask框架实现，通过提供API接口给前端调用，返回相关的游玩攻略数据。

@app.route('/api/travel-tips', methods=['GET'])
def get_travel_tips():
    data = {
        'open_hours': {
            'best_time': '四季皆宜',
            'suggested_duration': '2-3小时',
            'schedule': [
                {
                    'period': '周一至周日',
                    'dates': '1月1日至10月9日',
                    'hours': '07:00-19:00，19:00停止入场'
                }
            ],
            'note': '以上信息仅供参考，具体以当日实际公示信息为准'
        },

5.效果展示

①游玩须知——在整个页面中可以滑动查看。点击上方的标签进行滑动跳转。优待政策的表格也可以滑动下拉。

②服务设施——通过点击不同的服务设施来查看详细信息。

③交通攻略——展示不同的交通工具对应的路线和距离。