parent
2277ab8ae8
commit
f76806135b
@ -1,19 +1,31 @@
|
||||
<view class="index-container">
|
||||
<view class="header">
|
||||
<van-search bindtap="clickSearch" disabled bind:focus="clickSearch" value="{{ value }}" shape="round" background="#fa2c19" placeholder="请输入搜索关键词" />
|
||||
<view class="index-container"> <!-- 整个页面的容器 -->
|
||||
<view class="header"> <!-- 头部区域 -->
|
||||
<van-search
|
||||
bindtap="clickSearch" <!-- 点击搜索框时触发 clickSearch 方法 -->
|
||||
disabled <!-- 搜索框禁用 -->
|
||||
bind:focus="clickSearch" <!-- 搜索框获得焦点时触发 clickSearch 方法 -->
|
||||
value="{{ value }}" <!-- 搜索框的值绑定到 value 变量 -->
|
||||
shape="round" <!-- 搜索框形状为圆角 -->
|
||||
background="#fa2c19" <!-- 搜索框背景颜色 -->
|
||||
placeholder="请输入搜索关键词" /> <!-- 搜索框占位符文本 -->
|
||||
<!-- 轮播图 -->
|
||||
<swiper swiperData="{{ swiperData }}" indicatorDots="{{ swiperOptions.indicatorDots }}" autoplay="{{ swiperOptions.autoplay }}" interval="{{ swiperOptions.interval }}" duration="{{ swiperOptions.duration }}"></swiper>
|
||||
<swiper
|
||||
swiperData="{{ swiperData }}" <!-- 轮播图数据绑定到 swiperData 变量 -->
|
||||
indicatorDots="{{ swiperOptions.indicatorDots }}" <!-- 是否显示面板指示点 -->
|
||||
autoplay="{{ swiperOptions.autoplay }}" <!-- 是否自动切换 -->
|
||||
interval="{{ swiperOptions.interval }}" <!-- 自动切换时间间隔 -->
|
||||
duration="{{ swiperOptions.duration }}"> <!-- 滑动动画时长 -->
|
||||
</swiper>
|
||||
</view>
|
||||
<view class="nav">
|
||||
<van-grid column-num="4">
|
||||
<view class="nav"> <!-- 导航区域 -->
|
||||
<van-grid column-num="4"> <!-- 4列的网格布局 -->
|
||||
<van-grid-item
|
||||
wx:key="index"
|
||||
icon-color="{{ item.color }}"
|
||||
icon="{{ item.icon }}"
|
||||
text="{{ item.text }}"
|
||||
wx:for="{{ navData }}" />
|
||||
wx:key="index" <!-- 每个网格项的唯一标识 -->
|
||||
icon-color="{{ item.color }}" <!-- 图标颜色 -->
|
||||
icon="{{ item.icon }}" <!-- 图标名称 -->
|
||||
text="{{ item.text }}" <!-- 文本内容 -->
|
||||
wx:for="{{ navData }}" /> <!-- 循环渲染 navData 中的数据 -->
|
||||
</van-grid>
|
||||
</view>
|
||||
<goods-list goodsData="{{ goodsData }}"></goods-list>
|
||||
|
||||
</view>
|
||||
<goods-list goodsData="{{ goodsData }}"></goods-list> <!-- 商品列表组件，数据绑定到 goodsData 变量 -->
|
||||
</view> <!-- 整个页面的容器结束 -->
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
.header{
|
||||
background-image: -webkit-gradient(linear, left bottom, left top, from(#f1503b), color-stop(50%, #c82519));
|
||||
background-image: -webkit-linear-gradient(bottom, #f1503b, #c82519 50%);
|
||||
background-image: linear-gradient(0deg, #f1503b, #c82519 50%);
|
||||
width: 100%;
|
||||
height: 190px;
|
||||
border-bottom-left-radius: 100%;
|
||||
border-bottom-right-radius: 100%;
|
||||
.header { /* 定义头部区域的样式 */
|
||||
background-image: -webkit-gradient(linear, left bottom, left top, from(#f1503b), color-stop(50%, #c82519)); /* 使用 WebKit 渐变从底部到顶部，颜色从 #f1503b 到 #c82519 */
|
||||
background-image: -webkit-linear-gradient(bottom, #f1503b, #c82519 50%); /* 使用 WebKit 线性渐变从底部到顶部，颜色从 #f1503b 到 #c82519 */
|
||||
background-image: linear-gradient(0deg, #f1503b, #c82519 50%); /* 使用标准线性渐变从底部到顶部，颜色从 #f1503b 到 #c82519 */
|
||||
width: 100%; /* 宽度占满父容器 */
|
||||
height: 190px; /* 高度为 190 像素 */
|
||||
border-bottom-left-radius: 100%; /* 左下角圆角半径为 100%，形成圆形效果 */
|
||||
border-bottom-right-radius: 100%; /* 右下角圆角半径为 100%，形成圆形效果 */
|
||||
}
|
||||
|
||||
.nav{
|
||||
margin-top: 10px;
|
||||
.nav { /* 定义导航区域的样式 */
|
||||
margin-top: 10px; /* 上外边距为 10 像素 */
|
||||
}
|
||||
Loading…
Reference in new issue