小程序

小程序/components/header/header.js

@@ -0,0 +1,24 @@
+// components/header/header.js
+Component({
+
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+
+  }
+})

小程序/components/header/header.json

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

小程序/components/header/header.wxml

@@ -0,0 +1,4 @@
+<!--components/header/header.wxml-->
+<view class="header">
+  头部色块
+</view>

小程序/components/header/header.wxss

@@ -0,0 +1,6 @@
+/* components/header/header.wxss */
+.header {
+  width: 100%;
+  height: 100rpx;
+  background: yellow;
+}

小程序/pages/car/car.json

@@ -2,5 +2,7 @@
   "navigationBarTextStyle": "white",
   "navigationBarTitleText": "购物车",
   "navigationBarBackgroundColor": "#ff00ff",
-  "usingComponents": {}
+  "usingComponents": {
+    "header":"/components/header/header"
+  }
 }

小程序/pages/car/car.wxml

@@ -1,4 +1,5 @@
 <!--pages/car/car.wxml-->
 <text>购物车</text>
 <import src="/pages/home/home"/>
-<template is="news" data="{{holiday:'假期'}}" />
+<template is="news" data="{{holiday:'假期'}}" />
+<header></header>

小程序/pages/my/my.js

@@ -17,14 +17,33 @@ Page({
    * 页面的初始数据
    */
   data: {
-
+    background: ['demo-text-1', 'demo-text-2', 'demo-text-3'],
+    indicatorDots: true,
+    vertical: false,
+    autoplay: false,
+    interval: 2000,
+    duration: 500,
+    arr:[
+      {
+        id:1,
+        urls:'/icon/home.png'
+      },
+      {
+        id:2,
+        urls:'/icon/my.png'
+      },
+      {
+        id:3,
+        urls:'/icon/shop.png'
+      }
+    ]
   },
 
   /**
    * 生命周期函数--监听页面加载
    */
   onLoad(options) {
-    
+
   },
 
   /**

小程序/pages/my/my.wxml

@@ -1,3 +1,38 @@
 <!--pages/my/my.wxml-->
 <text>我的</text>
-<include src="/pages/car/car"/>
+<!-- 引入 -->
+<include src="/pages/car/car" />
+<!-- 轮播图 -->
+<view>
+  <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
+    <block wx:for="{{background}}" wx:key="*this">
+      <swiper-item>
+        <view class="swiper-item {{item}}"></view>
+      </swiper-item>
+    </block>
+  </swiper>
+</view>
+<!-- 横向滚动 -->
+<view class="page-section-spacing">
+  <scroll-view class="scroll-view_H" scroll-x="true" bindscroll="scroll" style="width: 100%">
+    <view id="demo1" class="scroll-view-item_H demo-text-4"></view>
+    <view id="demo2" class="scroll-view-item_H demo-text-5"></view>
+    <view id="demo3" class="scroll-view-item_H demo-text-6"></view>
+    <view id="demo1" class="scroll-view-item_H demo-text-4"></view>
+    <view id="demo2" class="scroll-view-item_H demo-text-5"></view>
+    <view id="demo3" class="scroll-view-item_H demo-text-6"></view>
+  </scroll-view>
+</view>
+<!-- 纵向滚动 -->
+<view class="main">
+  <view class="left">
+    <scroll-view scroll-y="true" style="height: 300rpx;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
+      <view id="demo1" class="scroll-view-item demo-text-7"></view>
+      <view id="demo2" class="scroll-view-item demo-text-8"></view>
+      <view id="demo3" class="scroll-view-item demo-text-9"></view>
+    </scroll-view>
+  </view>
+  <view class="right">
+    右侧
+  </view>
+</view>

小程序/pages/my/my.wxss

@@ -1 +1,79 @@
-/* pages/my/my.wxss */
+/* pages/my/my.wxss */
+.demo-text-1 {
+  width: 100%;
+  height: 100%;
+  background: #00f;
+}
+.demo-text-2 {
+  width: 100%;
+  height: 100%;
+  background: #f0f;
+}
+.demo-text-3 {
+  width: 100%;
+  height: 100%;
+  background: #ff0;
+}
+.demo-text-4 {
+  width: 100%;
+  height: 100%;
+  background: #f00;
+}
+.demo-text-5 {
+  width: 100%;
+  height: 100%;
+  background: aqua;
+}
+.demo-text-6 {
+  width: 100%;
+  height: 100%;
+  background: plum;
+}
+.demo-text-7 {
+  width: 100%;
+  height: 100%;
+  background: orange;
+}
+.demo-text-8 {
+  width: 100%;
+  height: 100%;
+  background: hotpink;
+}
+.demo-text-9 {
+  width: 100%;
+  height: 100%;
+  background: seagreen;
+}
+
+.page-section-spacing{
+  margin-top: 60rpx;
+}
+.scroll-view_H{
+  white-space: nowrap;
+}
+.scroll-view-item{
+  height: 300rpx;
+}
+.scroll-view-item_H{
+  display: inline-block;
+  width: 30%;
+  height: 300rpx;
+  margin-left: 30rpx;
+}
+
+.main {
+  width: 100%;
+  height: 300rpx;
+  display: flex;
+}
+
+.main .left {
+  flex: 4;
+}
+
+.main .right {
+  flex: 2;
+  height: 300rpx;
+  background: yellowgreen;
+  margin-left: 30rpx;
+}

小程序/project.private.config.json

@@ -9,7 +9,14 @@
       "list": [
         {
           "name": "",
-          "pathName": "pages/home/home",
+          "pathName": "pages/car/car",
+          "query": "",
+          "launchMode": "default",
+          "scene": null
+        },
+        {
+          "name": "",
+          "pathName": "pages/my/my",
           "query": "",
           "launchMode": "default",
           "scene": null