分析下面这段代码中有多少自定义组件，展示使用的自定义组件代码并介绍组件名称、组件参数、组件作用。<template>
<view class="container">
<view class="custom-navbar" :style="{ paddingTop: statusBarHeight + 'px' }">
<view class="nav-content">
<view class="location" @click="navigateToCitySelect">
<uni-icons type="location-filled" size="20" color="#fff"></uni-icons>
<text class="city-name">广州从化</text>
<uni-icons type="arrowdown" size="16" color="#fff"></uni-icons>
</view>
<view class="search-box" @click="navigateToSearch">
<uni-icons type="search" size="18" color="#999"></uni-icons>
<text>搜索商家、美食...</text>
</view>
</view>
</view>
<view class="content" :style="{ marginTop: (statusBarHeight + 50) + 'px' }">
<swiper class="swiper" indicator-dots autoplay circular>
<swiper-item v-for="(item, index) in banners" :key="index">
<image :src="item.image" mode="aspectFill" class="swiper-image"></image>
</swiper-item>
</swiper>
<view class="coupon-banner" @click="navigateToCoupon">
<uni-icons type="notification-filled" size="24" color="#fff"></uni-icons>
<view class="coupon-text">
<text class="coupon-title">新用户专享红包</text>
<text class="coupon-desc">最高立减20元，点击立即领取</text>
</view>
<uni-icons type="arrowright" size="20" color="#fff"></uni-icons>
</view>
<view class="category-container">
<scroll-view scroll-x class="category-scroll">
<view
v-for="(category, index) in categories"
:key="index"
class="category-item"
@click="navigateToCategory(category.id)"
>
<view class="category-icon" :style="{ backgroundColor: category.color }">
<uni-icons :type="category.icon" size="30" color="#fff"></uni-icons>
</view>
<text class="category-name">{{ category.name }}</text>
</view>
</scroll-view>
</view>
<view class="section-title">
<text>推荐商家</text>
<text class="more-link" @click="navigateToAllStores">查看更多 ></text>
</view>
<view class="store-list">
<view
v-for="(store, index) in stores"
:key="index"
class="store-item"
@click="navigateToStore(store.id)"
>
<image class="store-image" :src="store.image" mode="aspectFill"></image>
<view class="store-info">
<view class="store-name">
<text>{{ store.name }}</text>
<text class="min-price">¥{{ store.minPrice }}起送</text>
</view>
<view class="store-tags">
<text class="tag" v-for="(tag, i) in store.tags" :key="i">{{ tag }}</text>
</view>
<view class="store-detail">
<view>
<uni-rate :value="store.rating" size="14" disabled></uni-rate>
<text class="rating">{{ store.rating }}</text>
<text>月售{{ store.monthlySales }}单</text>
</view>
<text>{{ store.distance }} | {{ store.deliveryTime }}分钟</text>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
statusBarHeight: 0,
banners: [
{ image: '/static/l1.jpg', },
{ image: '/static/l2.jpg',},
{ image: '/static/s.jpg', }
],
categories: [
{ id: 1, name: '美食', icon: 'shop', color: '#FF5A5F' },
{ id: 2, name: '超市', icon: 'cart', color: '#0085FF' },
{ id: 3, name: '甜品', icon: 'star', color: '#FF5A5F' },
{ id: 4, name: '早餐', icon: 'circle', color: '#FFAA00' },
{ id: 5, name: '火锅', icon: 'fire', color: '#FF5A5F' },
{ id: 6, name: '轻食', icon: 'heart', color: '#34C759' }
],
stores: [
{
id: 1,
name: '肯德基宅急送',
image: '/static/ks.jpg',
minPrice: 20,
tags: ['品牌', '满减', '折扣'],
rating: 4.8,
monthlySales: 3245,
distance: '1.2km',
deliveryTime: 30
},
{
id: 2,
name: '麦当劳麦乐送',
image: '/static/ms.jpeg',
minPrice: 25,
tags: ['品牌', '优惠券', '折扣'],
rating: 4.7,
monthlySales: 2987,
distance: '0.8km',
deliveryTime: 25
},
{
id: 3,
name: '必胜客宅急送',
image: '/static/bs.png',
minPrice: 50,
tags: ['品牌', '新品', '满减'],
rating: 4.6,
monthlySales: 1876,
distance: '1.5km',
deliveryTime: 35
}
]
}
},
onLoad() {
const systemInfo = uni.getSystemInfoSync();
this.statusBarHeight = systemInfo.statusBarHeight;
},
methods: {
navigateToSearch() {
uni.showToast({
title: '跳转到搜索页面',
icon: 'none'
})
uni.navigateTo({
url: '/pages/category/search'
})
},
navigateToCitySelect() {
uni.showToast({
title: '选择城市',
icon: 'none'
})
},
navigateToProfile() {
uni.switchTab({
url: '/pages/profile/profile'
})
},
navigateToCoupon() {
uni.showToast({
title: '跳转到优惠券页面',
icon: 'none'
})
uni.navigateTo({
url: '/pages/category/discount'
})
},
navigateToCategory(id) {
const categoryPages = {
1: '/pages/category/food',
// 2: '/pages/category/supermarket',
// 3: '/pages/category/dessert',
// 4: '/pages/category/breakfast',
// 5: '/pages/category/hotpot',
// 6: '/pages/category/lightfood'
};
if (categoryPages[id]) {
uni.navigateTo({
url: categoryPages[id]
});
} else {
uni.showToast({
title: '页面正在开发中',
icon: 'none'
});
}
},
navigateToAllStores() {
uni.navigateTo({
url:'/pages/category/allstores'
})
}
}
}
</script>
<style>
page {
background-color: #f5f5f5;
color: #333;
font-size: 28rpx;
line-height: 1.5;
}
.container {
background-color: #fff;
min-height: 100vh;
padding-bottom: 120rpx;
position: relative;
}
.custom-navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
background: linear-gradient(90deg, #0085ff, #0af);
}
.nav-content {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10rpx 30rpx;
height: 90rpx;
}
.location {
display: flex;
align-items: center;
font-size: 32rpx;
font-weight: bold;
color: white;
}
.city-name {
margin: 0 8rpx;
max-width: 150rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.search-box {
flex: 1;
margin: 0 30rpx;
background: rgba(255, 255, 255, 0.8);
border-radius: 50rpx;
height: 70rpx;
display: flex;
align-items: center;
padding: 0 25rpx;
color: #666;
}
.search-box text {
margin-left: 10rpx;
font-size: 28rpx;
}
.content {
padding: 20rpx;
}
.swiper {
height: 320rpx;
border-radius: 20rpx;
overflow: hidden;
box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.1);
}
.swiper-image {
width: 100%;
height: 100%;
}
.coupon-banner {
margin: 30rpx 0;
background: linear-gradient(90deg, #ff5e3a, #ff9500);
border-radius: 16rpx;
padding: 20rpx 25rpx;
color: white;
display: flex;
align-items: center;
box-shadow: 0 6rpx 12rpx rgba(255, 94, 58, 0.2);
}
.coupon-text {
flex: 1;
display: flex;
flex-direction: column;
margin-left: 20rpx;
}
.coupon-title {
font-size: 32rpx;
font-weight: bold;
margin-bottom: 8rpx;
}
.coupon-desc {
font-size: 24rpx;
opacity: 0.9;
}
.category-container {
background: #fff;
padding: 20rpx 0 30rpx;
border-radius: 20rpx;
margin-bottom: 30rpx;
box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.05);
}
.category-scroll {
white-space: nowrap;
width: 100%;
padding: 0 10rpx;
}
.category-item {
display: inline-flex;
flex-direction: column;
align-items: center;
width: 150rpx;
margin: 0 10rpx;
}
.category-icon {
width: 100rpx;
height: 100rpx;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 15rpx;
}
.category-name {
font-size: 26rpx;
color: #666;
white-space: nowrap;
text-align: center;
}
.section-title {
padding: 20rpx 0;
font-size: 36rpx;
font-weight: bold;
display: flex;
justify-content: space-between;
align-items: center;
}
.more-link {
font-size: 26rpx;
color: #999;
font-weight: normal;
}
.store-list {
padding-bottom: 30rpx;
}
.store-item {
background: #fff;
border-radius: 20rpx;
overflow: hidden;
margin-bottom: 30rpx;
box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.08);
transition: transform 0.3s ease;
}
.store-item:active {
transform: scale(0.98);
}
.store-image {
width: 100%;
height: 300rpx;
}
.store-info {
padding: 20rpx;
}
.store-name {
font-size: 32rpx;
font-weight: bold;
margin-bottom: 10rpx;
display: flex;
justify-content: space-between;
}
.min-price {
color: #FF5A5F;
font-weight: bold;
}
.store-tags {
display: flex;
margin-bottom: 15rpx;
flex-wrap: wrap;
}
.tag {
font-size: 22rpx;
padding: 4rpx 12rpx;
border-radius: 6rpx;
margin-right: 10rpx;
margin-bottom: 8rpx;
background: #fff0f0;
color: #ff5a5f;
}
.store-detail {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 26rpx;
color: #666;
padding-top: 15rpx;
border-top: 1rpx dashed #eee;
}
.rating {
color: #ffaa00;
font-weight: bold;
margin: 0 10rpx;
}
.tabbar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 100rpx;
background: white;
display: flex;
box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.1);
z-index: 100;
border-top: 1rpx solid #eee;
}
.tab-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 22rpx;
color: #999;
}
.tab-item.active {
color: #0085ff;
}
.tab-item text {
margin-top: 6rpx;
}
</style>
最新发布
本文介绍在CS6环境中JSON类的两个核心方法：parse和stringify。这两个静态方法分别用于将JSON格式的字符串转换为ActionScript对象及反之。它们对应于以前的decode和encode方法。
扫一扫
1519
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
