uniapp结合uview制作美食页面
开发一个完整的旅游App页面，包含首页、目的地、行程、我的等主要功能模块。
功能说明
这个旅游信息展示页面包含以下主要功能：
-
城市选择功能：点击顶部城市选择器可以弹出城市选择面板，选择任意城市后会更新当前城市显示
-
旅游内容展示：
-
顶部轮播图展示热门旅游目的地
-
中部分类导航（景点门票、酒店住宿、旅游攻略等）
-
热门推荐横向滚动区域
-
精选攻略列表展示
-
-
UI设计特点：
-
使用渐变色和圆角设计，视觉吸引力强
-
合理的留白和间距，提高可读性
-
响应式布局，适应不同屏幕尺寸
-
-
交互体验：
-
城市选择平滑过渡
-
内容区域滚动流畅
-
视觉反馈明确
-
这个页面完全使用vue实现，集成了uView UI和uni-ui组件库，可以直接在浏览器中运行，也可以轻松集成到uni-app项目中。
<template>
<view style="background-color: #F7F7F6; ">
<!-- 搜索部分 -->
<view class="container">
<!-- 小程序头部兼容 -->
<!-- <uni-search-bar radius="20" placeholder="搜索服务" clearButton="always" cancelButton='none' @confirm="search" /> -->
<!-- <headers :colors="colors" :locations="locations" :swiperList="swiperList" ></headers> -->
<view>
<!-- 搜索框容器 -->
<view class="search-container">
<!-- 搜索框内部盒子 -->
<view class="search-box">
<!-- 使用uni-ui 提供的图标组件 -->
<uni-icons type="search" size="17"></uni-icons>
<text class="search-content" @click="gotoSearch">搜索</text>
</view>
</view>
</view>
<!-- 城市选择器 -->
<u-picker
v-model="showCityPicker"
:columns="cityColumns"
@confirm="confirmCity"
title="选择旅游城市"
:confirm-color="'#ff7d00'"
></u-picker>
<view class="area" @click="showCityPicker = true">
请选择
<uni-icons type="bottom" size="15"></uni-icons>
</view>
</view>
<!-- banner图 -->
<!-- <view class="banner">
</view> -->
<!-- 轮播图 -->
<swiper class="screen-swiper square-dot" :indicator-dots="false" :circular="true" :autoplay="true"
interval="5000" duration="500">
<swiper-item v-for="(item,index) in swiperList" :key="index">
<!-- <image :src="item.img" mode="aspectFill" class="bannerImg"></image> -->
<view :style="{backgroundImage: `url(${item.img})` }" class="bannerImg"></view>
</swiper-item>
</swiper>
<!-- 分类导航 -->
<view class="classify">
<view class="classify-box" v-for="(item, index) in classify" :key="index" @click="gotoClassify(item.title)">
<view class="classify-img" :style="{ backgroundColor: item.color }">
<u-icon :name="item.icon" color="#333" size="24"></u-icon>
</view>
<view class="classify-text">{ { item.title }}</view>
</view>
</view>
<!-- 超值优惠 -->
<view class="preferential">
<!-- 优惠标题 -->
<u-section title="特惠旅游套餐" sub-title="查看更多" :show-line="false" class="section" font-size="32"></u-section>
<!-- 优惠内容 -->
<view class="pre_content">
<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll">
<view id="demo" class="scroll-view-item_H uni-bg-red" v-for="item in preferentialData"
:key="item.id">
<view class="pre_img">
</view>
<view class="title">
<span class="tuan">团</span>
<span class="text">仅售{ {item.price}}元！{ {item.title}}</span>
</view>
<view class="price">
<span class="now_price"><span class="icon">￥</span>{ {item.price.toFixed(2)}}</span>
<span class="old_price"
style="text-decoration-line: line-through;">市场价：{ {item.storePrice}}元</span>
</view>
</view>
</scroll-view>
</view>
</view>
<!-- 为你推荐 -->
<view class="recom">
<!--<view class="title">
<text class="big">为你推荐</text>
<text class="small" @click="targetOther('recommend')">查看更多</text>
</view> -->
<!-- 优惠标题 -->
<u-section title="为你推荐" sub-title="查看更多" :show-line="false" class="section title_recommend" font-size="32"
@click="targetOther('recommend')"></u-section>
<!-- 分类列表 -->
<view class="recommend">
<view class="tj-box" v-for="item in recommend">
<view class="tj-img" :style="{backgroundImage:`url(${item.imageUrl})`}">
</view>
<view class="tj-txt">
<view class="title">
{ {item.title}}
</view>
<view class="tj-wz">
<view style="color: #A0A0A0;">
<uni-icons color='#F6637C' type="location-filled" size="20"></uni-icons>
沙坪坝步行街
</view>
<view class="" style="color: #FE2121;">
250m
</view>
</view>
<view class="tj-zl">
<view class="">
烧烤烤肉
</view>
<view class="tj-wm">
支持外卖
</view>
</view>
<view class="quan">