qgh

yuan ma/mp-shop/components/swiper/swiper.js

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

yuan ma/mp-shop/components/swiper/swiper.json

@@ -1,4 +1,4 @@
 {
     "component": true,
     "usingComponents": {}
-}
+}

yuan ma/mp-shop/components/swiper/swiper.wxml

@@ -1,9 +1,22 @@
+<!-- 外层视图容器，类名为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>
     </swiper>
-</view>
+</view>

yuan ma/mp-shop/components/swiper/swiper.wxss

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

yuan ma/mp-shop/pages/index/index.js

@@ -1,104 +1,117 @@
-const { getBanner,getGoods } = require("../../api/index.js")
+// 引入api模块中的getBanner和getGoods函数
-/**
+const { getBanner, getGoods } = require("../../api/index.js")
-邓泽玉212206213
+
-**/
+// 定义页面对象
 Page({
+    // 页面数据
     data: {
-        value: "",
+        value: "", // 搜索框的值，初始为空字符串
-        swiperOptions:{
+        swiperOptions: {
-            indicatorDots:true,
+            indicatorDots: true, // 是否显示面板指示点
-            autoplay:true,
+            autoplay: true,      // 是否自动切换
-            interval:3000,
+            interval: 3000,      // 自动切换时间间隔，单位为毫秒
-            duration:1000,
+            duration: 1000,      // 滑动动画时长，单位为毫秒
-            swiperData:[]
+            swiperData: []       // 轮播图的数据源，初始为空数组
         },
-        navData:[
+        navData: [
+            // 导航栏数据
             {
-                text:"数码",
+                text: "数码",    // 文本内容
-                icon:"like",
+                icon: "like",    // 图标名称
-                color:"#ff0000"
+                color: "#ff0000" // 图标颜色
             },
             {
-                text:"生鲜",
+                text: "生鲜",
-                icon:"star",
+                icon: "star",
-                color:"#ff0000"
+                color: "#ff0000"
             },
             {
-                text:"会员",
+                text: "会员",
-                icon:"fire",
+                icon: "fire",
-                color:"#ff0000"
+                color: "#ff0000"
             },
             {
-                text:"优惠",
+                text: "优惠",
-                icon:"gift",
+                icon: "gift",
-                color:"#ff0000"
+                color: "#ff0000"
             },
             {
-                text:"充值",
+                text: "充值",
-                icon:"phone",
+                icon: "phone",
-                color:"#ff0000"
+                color: "#ff0000"
             },
             {
-                text:"领券",
+                text: "领券",
-                icon:"gem",
+                icon: "gem",
-                color:"#ff0000"
+                color: "#ff0000"
             },
             {
-                text:"外卖",
+                text: "外卖",
-                icon:"gift-card",
+                icon: "gift-card",
-                color:"#ff0000"
+                color: "#ff0000"
             },
             {
-                text:"美食",
+                text: "美食",
-                icon:"smile",
+                icon: "smile",
-                color:"#ff0000"
+                color: "#ff0000"
             }
         ],
-        page:1,
+        page: 1, // 当前页码，初始为1
-        goodsData:[]
+        goodsData: [] // 商品数据，初始为空数组
     },
+
+    // 页面加载时执行的函数
     onLoad() {
-        getBanner().then(res =>{
+        // 获取轮播图数据
+        getBanner().then(res => {
             this.setData({
-                indicatorDots:true,
+                indicatorDots: true, // 设置是否显示面板指示点
-                autoplay:true,
+                autoplay: true,      // 设置是否自动切换
-                interval:3000,
+                interval: 3000,      // 设置自动切换时间间隔
-                duration:1000,
+                duration: 1000,      // 设置滑动动画时长
-                swiperData:res.data.data.result
+                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,
+                    title: res.data.msg, // 提示信息内容
-                  icon:"success",
+                    icon: "success",     // 提示图标类型
-                  duration:2000
+                    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',
         })
     }
-})
+})

yuan ma/mp-shop/pages/index/index.wxml

@@ -1,19 +1,31 @@
-<view class="index-container">
+<view class="index-container"> <!-- 整个页面的容器 -->
-    <view class="header">
+    <view class="header"> <!-- 头部区域 -->
-        <van-search bindtap="clickSearch" disabled bind:focus="clickSearch" value="{{ value }}" shape="round" background="#fa2c19" placeholder="请输入搜索关键词" />
+        <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">
+    <view class="nav"> <!-- 导航区域 -->
-        <van-grid column-num="4">
+        <van-grid column-num="4"> <!-- 4列的网格布局 -->
-            <van-grid-item 
+            <van-grid-item
-                wx:key="index"
+                wx:key="index" <!-- 每个网格项的唯一标识 -->
-                icon-color="{{ item.color }}" 
+                icon-color="{{ item.color }}" <!-- 图标颜色 -->
-                icon="{{ item.icon }}" 
+                icon="{{ item.icon }}" <!-- 图标名称 -->
-                text="{{ item.text }}" 
+                text="{{ item.text }}" <!-- 文本内容 -->
-                wx:for="{{ navData }}" />
+                wx:for="{{ navData }}" /> <!-- 循环渲染 navData 中的数据 -->
         </van-grid>
     </view>
-    <goods-list goodsData="{{ goodsData }}"></goods-list>
+    <goods-list goodsData="{{ goodsData }}"></goods-list> <!-- 商品列表组件，数据绑定到 goodsData 变量 -->
-
+</view> <!-- 整个页面的容器结束 -->
-</view>

yuan ma/mp-shop/pages/index/index.wxss

@@ -1,13 +1,13 @@
-.header{
+.header { /* 定义头部区域的样式 */
-    background-image: -webkit-gradient(linear, left bottom, left top, from(#f1503b), color-stop(50%, #c82519));
+    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%);
+    background-image: -webkit-linear-gradient(bottom, #f1503b, #c82519 50%); /* 使用 WebKit 线性渐变从底部到顶部，颜色从 #f1503b 到 #c82519 */
-    background-image: linear-gradient(0deg, #f1503b, #c82519 50%);
+    background-image: linear-gradient(0deg, #f1503b, #c82519 50%); /* 使用标准线性渐变从底部到顶部，颜色从 #f1503b 到 #c82519 */
-    width: 100%;
+    width: 100%; /* 宽度占满父容器 */
-    height: 190px;
+    height: 190px; /* 高度为 190 像素 */
-    border-bottom-left-radius: 100%;
+    border-bottom-left-radius: 100%; /* 左下角圆角半径为 100%，形成圆形效果 */
-    border-bottom-right-radius: 100%;
+    border-bottom-right-radius: 100%; /* 右下角圆角半径为 100%，形成圆形效果 */
 }
 
-.nav{
+.nav { /* 定义导航区域的样式 */
-    margin-top: 10px;
+    margin-top: 10px; /* 上外边距为 10 像素 */
-}
+}