From f76806135b8a314171cad679908c9da639e49070 Mon Sep 17 00:00:00 2001 From: fdzcxy212206240 <1985535874@qq.com> Date: Tue, 17 Dec 2024 22:36:41 +0800 Subject: [PATCH] qgh --- yuan ma/mp-shop/components/swiper/swiper.js | 43 +++--- yuan ma/mp-shop/components/swiper/swiper.json | 2 +- yuan ma/mp-shop/components/swiper/swiper.wxml | 17 ++- yuan ma/mp-shop/components/swiper/swiper.wxss | 13 +- yuan ma/mp-shop/pages/index/index.js | 135 ++++++++++-------- yuan ma/mp-shop/pages/index/index.wxml | 42 ++++-- yuan ma/mp-shop/pages/index/index.wxss | 22 +-- 7 files changed, 162 insertions(+), 112 deletions(-) diff --git a/yuan ma/mp-shop/components/swiper/swiper.js b/yuan ma/mp-shop/components/swiper/swiper.js index 378a15d..ef66998 100644 --- a/yuan ma/mp-shop/components/swiper/swiper.js +++ b/yuan ma/mp-shop/components/swiper/swiper.js @@ -1,41 +1,50 @@ +// 定义一个自定义组件 Component({ /** * 组件的属性列表 + * 这些属性可以在父组件中传递给子组件，用于配置子组件的行为和显示 */ properties: { - indicatorDots:{ - type:Boolean, - value:false + // 是否显示面板指示点 + indicatorDots: { + type: Boolean, // 属性类型为布尔值 + value: false // 默认值为false，即不显示指示点 }, - autoplay:{ - type:Boolean, - value:false + // 是否自动切换 + autoplay: { + type: Boolean, // 属性类型为布尔值 + value: false // 默认值为false，即不自动切换 }, - interval:{ - type:Number, - value:5000 + // 自动切换时间间隔，单位为毫秒 + interval: { + type: Number, // 属性类型为数字 + value: 5000 // 默认值为5000毫秒，即5秒 }, - duration:{ - type:Number, - value:500 + // 滑动动画时长，单位为毫秒 + duration: { + type: Number, // 属性类型为数字 + value: 500 // 默认值为500毫秒 }, - swiperData:{ - type:Array, - value:[] + // 轮播图的数据源，数组形式 + swiperData: { + type: Array, // 属性类型为数组 + value: [] // 默认值为空数组 } }, /** * 组件的初始数据 + * 这些数据是组件内部使用的，不会从外部传递 */ data: { - + // 可以在这里定义组件内部的数据，例如当前激活的滑块索引等 }, /** * 组件的方法列表 + * 这些方法可以被组件内部调用，也可以暴露给父组件调用 */ methods: { - + // 可以在这里定义组件的各种方法，例如处理滑动事件、更新数据等 } }) diff --git a/yuan ma/mp-shop/components/swiper/swiper.json b/yuan ma/mp-shop/components/swiper/swiper.json index 7e37c03..59a1db6 100644 --- a/yuan ma/mp-shop/components/swiper/swiper.json +++ b/yuan ma/mp-shop/components/swiper/swiper.json @@ -1,4 +1,4 @@ { "component": true, "usingComponents": {} -} \ No newline at end of file +} diff --git a/yuan ma/mp-shop/components/swiper/swiper.wxml b/yuan ma/mp-shop/components/swiper/swiper.wxml index 1bf62c9..d50cdd8 100644 --- a/yuan ma/mp-shop/components/swiper/swiper.wxml +++ b/yuan ma/mp-shop/components/swiper/swiper.wxml @@ -1,9 +1,22 @@ + - + + + indicator-dots="{{ indicatorDots }}" + autoplay="{{ autoplay }}" + interval="{{ interval }}" + duration="{{ duration }}" + indicator-color="#fff" + indicator-active-color="#fa2c19"> + + + + - \ No newline at end of file + diff --git a/yuan ma/mp-shop/components/swiper/swiper.wxss b/yuan ma/mp-shop/components/swiper/swiper.wxss index 7a82639..4e139b4 100644 --- a/yuan ma/mp-shop/components/swiper/swiper.wxss +++ b/yuan ma/mp-shop/components/swiper/swiper.wxss @@ -1,6 +1,9 @@ -.swiper{ - padding: 0 10px; +/* 定义类名为swiper的样式 */ +.swiper { + padding: 0 10px; /* 设置左右内边距为10px，顶部和底部内边距为0 */ +} + +/* 定义image元素的样式 */ +image { + width: 100%; /* 设置图片宽度为100%，使其宽度自适应其父容器 */ } -image{ - width: 100%; -} \ No newline at end of file diff --git a/yuan ma/mp-shop/pages/index/index.js b/yuan ma/mp-shop/pages/index/index.js index 63de688..8239df4 100644 --- a/yuan ma/mp-shop/pages/index/index.js +++ b/yuan ma/mp-shop/pages/index/index.js @@ -1,104 +1,117 @@ -const { getBanner,getGoods } = require("../../api/index.js") -/** -邓泽玉212206213 -**/ +// 引入api模块中的getBanner和getGoods函数 +const { getBanner, getGoods } = require("../../api/index.js") + +// 定义页面对象 Page({ + // 页面数据 data: { - value: "", - swiperOptions:{ - indicatorDots:true, - autoplay:true, - interval:3000, - duration:1000, - swiperData:[] + value: "", // 搜索框的值，初始为空字符串 + swiperOptions: { + indicatorDots: true, // 是否显示面板指示点 + autoplay: true, // 是否自动切换 + interval: 3000, // 自动切换时间间隔，单位为毫秒 + duration: 1000, // 滑动动画时长，单位为毫秒 + swiperData: [] // 轮播图的数据源，初始为空数组 }, - navData:[ + navData: [ + // 导航栏数据 { - text:"数码", - icon:"like", - color:"#ff0000" + text: "数码", // 文本内容 + icon: "like", // 图标名称 + color: "#ff0000" // 图标颜色 }, { - text:"生鲜", - icon:"star", - color:"#ff0000" + text: "生鲜", + icon: "star", + color: "#ff0000" }, { - text:"会员", - icon:"fire", - color:"#ff0000" + text: "会员", + icon: "fire", + color: "#ff0000" }, { - text:"优惠", - icon:"gift", - color:"#ff0000" + text: "优惠", + icon: "gift", + color: "#ff0000" }, { - text:"充值", - icon:"phone", - color:"#ff0000" + text: "充值", + icon: "phone", + color: "#ff0000" }, { - text:"领券", - icon:"gem", - color:"#ff0000" + text: "领券", + icon: "gem", + color: "#ff0000" }, { - text:"外卖", - icon:"gift-card", - color:"#ff0000" + text: "外卖", + icon: "gift-card", + color: "#ff0000" }, { - text:"美食", - icon:"smile", - color:"#ff0000" + text: "美食", + icon: "smile", + color: "#ff0000" } ], - page:1, - goodsData:[] + page: 1, // 当前页码，初始为1 + goodsData: [] // 商品数据，初始为空数组 }, + + // 页面加载时执行的函数 onLoad() { - getBanner().then(res =>{ + // 获取轮播图数据 + 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){ + + // 获取商品数据的函数 + 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{ - // 给出用户提示 + } else { + // 如果有错误消息，显示提示信息 wx.showToast({ - title: res.data.msg, - icon:"success", - duration:2000 + title: res.data.msg, // 提示信息内容 + icon: "success", // 提示图标类型 + duration: 2000 // 提示显示时长，单位为毫秒 }) } }) }, - onReachBottom(){ - // 更改页码 + + // 页面滚动到底部时触发的函数 + onReachBottom() { + // 更新页码 this.setData({ - page:this.data.page += 1 + page: this.data.page + 1 // 页码加1 }) + // 加载下一页商品数据 this.http(this.data.page) }, + /** - * 点击搜索框获取焦点 + * 点击搜索框获取焦点时触发的函数 */ - clickSearch(){ + clickSearch() { + // 跳转到搜索页面 wx.navigateTo({ - url: '/pages/search/search', + url: '/pages/search/search', }) } -}) \ No newline at end of file +}) diff --git a/yuan ma/mp-shop/pages/index/index.wxml b/yuan ma/mp-shop/pages/index/index.wxml index 0f78760..7290bfd 100644 --- a/yuan ma/mp-shop/pages/index/index.wxml +++ b/yuan ma/mp-shop/pages/index/index.wxml @@ -1,19 +1,31 @@ - - - + + + + disabled + bind:focus="clickSearch" + value="{{ value }}" + shape="round" + background="#fa2c19" + placeholder="请输入搜索关键词" /> - + + indicatorDots="{{ swiperOptions.indicatorDots }}" + autoplay="{{ swiperOptions.autoplay }}" + interval="{{ swiperOptions.interval }}" + duration="{{ swiperOptions.duration }}"> + - - - + + + + icon-color="{{ item.color }}" + icon="{{ item.icon }}" + text="{{ item.text }}" + wx:for="{{ navData }}" /> - - - \ No newline at end of file + + diff --git a/yuan ma/mp-shop/pages/index/index.wxss b/yuan ma/mp-shop/pages/index/index.wxss index a736bc2..388c717 100644 --- a/yuan ma/mp-shop/pages/index/index.wxss +++ b/yuan ma/mp-shop/pages/index/index.wxss @@ -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; -} \ No newline at end of file +.nav { /* 定义导航区域的样式 */ + margin-top: 10px; /* 上外边距为 10 像素 */ +}