小程序

12.小程序/components/header/header.js

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

12.小程序/components/header/header.json

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

12.小程序/components/header/header.wxml

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

12.小程序/components/header/header.wxss

@@ -0,0 +1,9 @@
+/* components/header/header.wxss */
+.header {
+  width: 100vw;
+  height: 100rpx;
+  color: #ff0;
+  background: #f00;
+  text-align: center;
+  line-height: 100rpx;
+}

12.小程序/pages/list/list.js

@@ -5,6 +5,8 @@ Page({
    * 页面的初始数据
    */
   data: {
+    userName:"",
+    passWord:"",
     score:10,
     list: [{
       id: 1,
@@ -13,8 +15,17 @@ Page({
       id: 2,
       name: '猪八戒'
     }],
+    background: ['demo-text-1', 'demo-text-2', 'demo-text-3'],
+    indicatorDots: true,
+    vertical: false,
+    autoplay: false,
+    interval: 2000,
+    duration: 500
+  },
+  handleSumbit(event) {
+    this.userName = event.detail.value.userName;
+    console.log("提交表单",this.userName,this.passWord,event)
   },
-
   /**
    * 生命周期函数--监听页面加载
    */

12.小程序/pages/list/list.json

@@ -1,3 +1,5 @@
 {
-  "usingComponents": {}
+  "usingComponents": {
+    "header1":"../../components/header/header"
+  }
 }

12.小程序/pages/list/list.wxml

@@ -1,4 +1,39 @@
 <!--pages/list/list.wxml-->
 <import src="../home/home" />
+<header1></header1>
 <text>pages/list/list.wxml</text>
-<template is="hi" data="{{score,list}}" />
+<!-- <template is="hi" data="{{score,list}}" /> -->
+<!-- 可视区域 -->
+<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-1"></view>
+    <view id="demo2" class="scroll-view-item_H demo-text-2"></view>
+    <view id="demo3" class="scroll-view-item_H demo-text-3"></view>
+    <view id="demo1" class="scroll-view-item_H demo-text-1"></view>
+    <view id="demo2" class="scroll-view-item_H demo-text-2"></view>
+    <view id="demo3" class="scroll-view-item_H demo-text-3"></view>
+    <view id="demo1" class="scroll-view-item_H demo-text-1"></view>
+    <view id="demo2" class="scroll-view-item_H demo-text-2"></view>
+    <view id="demo3" class="scroll-view-item_H demo-text-3"></view>
+  </scroll-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>
+  <!-- 表单 -->
+  <form bindsubmit="handleSumbit">
+    <view>
+      <label>用户名</label>
+      <input type="text" name="userName" value="{{userName}}" />
+    </view>
+    <view>
+      <label>密码</label>
+      <input type="text" name="passWord" value="{{passWord}}" />
+    </view>
+    <button form-type="submit">提交</button>
+  </form>
+</view>

12.小程序/pages/list/list.wxss

@@ -1 +1,37 @@
-/* pages/list/list.wxss */
+/* pages/list/list.wxss */
+.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: 20rpx;
+}
+#demo1 {
+  background: #00f;
+}
+#demo2 {
+  background: #f0f;
+}
+#demo3 {
+  background: #0ff;
+}
+.demo-text-1 {
+  height: 300rpx;
+  background: #0ff;
+}
+.demo-text-2 {
+  height: 300rpx;
+  background: #f00;
+}
+.demo-text-3 {
+  height: 300rpx;
+  background: #ff0;
+}

12.小程序/project.private.config.json

@@ -19,5 +19,18 @@
     "checkInvalidKey": true,
     "ignoreDevUnusedFiles": true
   },
-  "libVersion": "3.10.0"
+  "libVersion": "3.10.0",
+  "condition": {
+    "miniprogram": {
+      "list": [
+        {
+          "name": "pages/list/list",
+          "pathName": "pages/list/list",
+          "query": "",
+          "scene": null,
+          "launchMode": "default"
+        }
+      ]
+    }
+  }
 }