fdzcxy212206240 7 months ago
parent 2277ab8ae8
commit f76806135b

@ -1,41 +1,50 @@
// 定义一个自定义组件
Component({
/**
* 组件的属性列表
* 这些属性可以在父组件中传递给子组件用于配置子组件的行为和显示
*/
properties: {
// 是否显示面板指示点
indicatorDots: {
type:Boolean,
value:false
type: Boolean, // 属性类型为布尔值
value: false // 默认值为false即不显示指示点
},
// 是否自动切换
autoplay: {
type:Boolean,
value:false
type: Boolean, // 属性类型为布尔值
value: false // 默认值为false即不自动切换
},
// 自动切换时间间隔,单位为毫秒
interval: {
type:Number,
value:5000
type: Number, // 属性类型为数字
value: 5000 // 默认值为5000毫秒即5秒
},
// 滑动动画时长,单位为毫秒
duration: {
type:Number,
value:500
type: Number, // 属性类型为数字
value: 500 // 默认值为500毫秒
},
// 轮播图的数据源,数组形式
swiperData: {
type:Array,
value:[]
type: Array, // 属性类型为数组
value: [] // 默认值为空数组
}
},
/**
* 组件的初始数据
* 这些数据是组件内部使用的不会从外部传递
*/
data: {
// 可以在这里定义组件内部的数据,例如当前激活的滑块索引等
},
/**
* 组件的方法列表
* 这些方法可以被组件内部调用也可以暴露给父组件调用
*/
methods: {
// 可以在这里定义组件的各种方法,例如处理滑动事件、更新数据等
}
})

@ -1,7 +1,20 @@
<!-- 外层视图容器类名为swiper -->
<view class="swiper">
<swiper class="myswiper" indicator-dots="{{ indicatorDots }}" autoplay="{{ autoplay }}" interval="{{ interval }}" duration="{{ duration }}" indicator-color="#fff" indicator-active-color="#fa2c19">
<!-- 使用swiper组件设置相关属性 -->
<swiper
class="myswiper" <!-- 设置swiper组件的类名为myswiper -->
indicator-dots="{{ indicatorDots }}" <!-- 是否显示面板指示点绑定到组件属性indicatorDots -->
autoplay="{{ autoplay }}" <!-- 是否自动切换绑定到组件属性autoplay -->
interval="{{ interval }}" <!-- 自动切换时间间隔绑定到组件属性interval -->
duration="{{ duration }}" <!-- 滑动动画时长绑定到组件属性duration -->
indicator-color="#fff" <!-- 指示点颜色 -->
indicator-active-color="#fa2c19"> <!-- 当前选中的指示点颜色 -->
<!-- 使用block组件循环渲染swiper-item -->
<block wx:for="{{ swiperData }}" wx:key="index">
<!-- 每个swiper-item组件 -->
<swiper-item>
<!-- 图片组件mode设置为宽度自适应src绑定到当前项的url -->
<image mode="widthFix" src="{{ item.url }}"></image>
</swiper-item>
</block>

@ -1,6 +1,9 @@
/* 定义类名为swiper的样式 */
.swiper {
padding: 0 10px;
padding: 0 10px; /* 设置左右内边距为10px顶部和底部内边距为0 */
}
/* 定义image元素的样式 */
image {
width: 100%;
width: 100%; /* 设置图片宽度为100%,使其宽度自适应其父容器 */
}

@ -1,22 +1,24 @@
// 引入api模块中的getBanner和getGoods函数
const { getBanner, getGoods } = require("../../api/index.js")
/**
邓泽玉212206213
**/
// 定义页面对象
Page({
// 页面数据
data: {
value: "",
value: "", // 搜索框的值,初始为空字符串
swiperOptions: {
indicatorDots:true,
autoplay:true,
interval:3000,
duration:1000,
swiperData:[]
indicatorDots: true, // 是否显示面板指示点
autoplay: true, // 是否自动切换
interval: 3000, // 自动切换时间间隔,单位为毫秒
duration: 1000, // 滑动动画时长,单位为毫秒
swiperData: [] // 轮播图的数据源,初始为空数组
},
navData: [
// 导航栏数据
{
text:"数码",
icon:"like",
color:"#ff0000"
text: "数码", // 文本内容
icon: "like", // 图标名称
color: "#ff0000" // 图标颜色
},
{
text: "生鲜",
@ -54,49 +56,60 @@ Page({
color: "#ff0000"
}
],
page:1,
goodsData:[]
page: 1, // 当前页码初始为1
goodsData: [] // 商品数据,初始为空数组
},
// 页面加载时执行的函数
onLoad() {
// 获取轮播图数据
getBanner().then(res => {
this.setData({
indicatorDots:true,
autoplay:true,
interval:3000,
duration:1000,
swiperData:res.data.data.result
indicatorDots: true, // 设置是否显示面板指示点
autoplay: true, // 设置是否自动切换
interval: 3000, // 设置自动切换时间间隔
duration: 1000, // 设置滑动动画时长
swiperData: res.data.data.result // 设置轮播图数据
})
})
// 加载第一页商品数据
this.http(this.data.page)
},
// 获取商品数据的函数
http(page) {
getGoods({ page }).then(res => {
if (!res.data.msg) {
// 如果没有错误消息,合并新数据到现有商品数据中
this.setData({
// 老数据合并新数据,做累加操作
goodsData:this.data.goodsData.concat(res.data.data.result)
goodsData: this.data.goodsData.concat(res.data.data.result) // 累加新数据
})
} else {
// 给出用户提示
// 如果有错误消息,显示提示信息
wx.showToast({
title: res.data.msg,
icon:"success",
duration:2000
title: res.data.msg, // 提示信息内容
icon: "success", // 提示图标类型
duration: 2000 // 提示显示时长,单位为毫秒
})
}
})
},
// 页面滚动到底部时触发的函数
onReachBottom() {
// 更改页码
// 更页码
this.setData({
page:this.data.page += 1
page: this.data.page + 1 // 页码加1
})
// 加载下一页商品数据
this.http(this.data.page)
},
/**
* 点击搜索框获取焦点
* 点击搜索框获取焦点时触发的函数
*/
clickSearch() {
// 跳转到搜索页面
wx.navigateTo({
url: '/pages/search/search',
})

@ -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…
Cancel
Save