小程序

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,11 @@
+/* components/header/header.wxss */
+.header {
+  width: 100%;
+  height: 80px;
+  color: #ff0;
+  background: #f00;
+  font-weight: bold;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

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

@@ -20,7 +20,13 @@ Page({
         age:22
       }
     ],
-    age: 19
+    age: 19,
+    background: ['demo-text-1', 'demo-text-2', 'demo-text-3'],
+    indicatorDots: true,
+    vertical: false,
+    autoplay: false,
+    interval: 2000,
+    duration: 500
   },
   handleBox: function() {
     console.log("box")

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

@@ -1,4 +1,6 @@
 {
   "enablePullDownRefresh": true,
-  "usingComponents": {}
-}
+  "usingComponents": {
+    "headers":"../../components/header/header"
+  }
+}

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

@@ -1,5 +1,6 @@
 <!--pages/home/home.wxml-->
 <view>
+  <headers></headers>
   <view>哈哈哈哈</view>
   <template name="aa">
     <text>这是首页内容</text>
@@ -33,6 +34,28 @@
   <view class="main" wx:else="{{age > 18}}">青年</view>
   <!-- 事件 -->
   <view class="box" catch:tap="handleBox">
-    <view class="box1"  catch:tap="handleBox1"></view>
+    <view class="box1" catch:tap="handleBox1"></view>
+  </view>
+  <!-- swiper -->
+  <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>
+  <!-- scroll-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-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>
   </view>
 </view>

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

@@ -14,3 +14,38 @@
   height: 300rpx;
   background: #ff0;
 }
+
+.demo-text-1,.demo-text-2,.demo-text-3 {
+  width: 100%;
+  height: 150px;
+}
+.demo-text-1{
+  background: #00f;
+}
+.demo-text-2{
+  background: aqua;
+}
+.demo-text-3{
+  background: hotpink;
+}
+
+.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: 100%;
+  height: 300rpx;
+}
+
+#demo1,#demo2,#demo3 {
+  width: 100px;
+  height: 150px;
+  margin-left: 20px;
+}