小程序

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

@@ -6,6 +6,7 @@ Page({
    */
   data: {
     name:"图图",
+    users: "小明",
     list:[
       {
         name:"孙悟空",
@@ -16,7 +17,13 @@ Page({
         desc:"九齿钉耙"
       }
     ],
-    score: 50
+    score: 50,
+    background: ['demo-text-1', 'demo-text-2', 'demo-text-3'],
+    indicatorDots: true,
+    vertical: false,
+    autoplay: true,
+    interval: 2000,
+    duration: 500
   },
   handleChange: function() {
     console.log("触碰了")
@@ -24,6 +31,17 @@ Page({
      name:"哆啦A梦" 
     })
   },
+  handleInput(e) {
+    // console.log(e,'eeee')
+    const key = e.detail.value;
+    this.setData({
+      users: key
+    })
+    console.log(this.data.users,'sss')
+  },
+  handleChange(e) {
+    console.log(e)
+  },
   handleScore:function() {
     console.log(this.data.score,'分数')
     this.setData({

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

@@ -1,13 +1,23 @@
 <!--pages/home/home.wxml-->
 <view>
-<headers></headers>
+  <headers></headers>
+  <!-- 表单绑定 -->
+  <input type="text" class="inp" value="{{users}}" bindinput="handleInput" />
+  <!-- <input type="radio"/> -->
+  <radio-group bindchange="handleChange">
+    <radio value="man" />男
+    <radio value="woman" />女
+  </radio-group>
+  <!-- <checkbox-group bindchange="">
+  <checkbox value=""/>
+</checkbox-group> -->
   <view class="names">我叫:{{name}}</view>
   <button bind:tap="handleChange">修改</button>
   <view wx:for="{{list}}" wx:key="index">
     <view>我叫{{item.name}},我使用{{item.desc}}</view>
   </view>
   <view>
-  <view>当前分数:{{score}}</view>
+    <view>当前分数:{{score}}</view>
     <view wx:if="{{score < 60}}">不及格</view>
     <view wx:elif="{{score < 80}}">及格</view>
     <view wx:elif="{{score < 90}}">良好</view>
@@ -21,6 +31,23 @@
   </template>
 </view>
 
-<view class="box" bind:tap="handleBox"> 
+<view class="box" bind:tap="handleBox">
   <view class="box1" catch:tap="handleBox1"> </view>
+</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 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-1"></view>
+    <view id="demo2" class="scroll-view-item_H demo-2"></view>
+    <view id="demo3" class="scroll-view-item_H demo-3"></view>
+  </scroll-view>
 </view>

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

@@ -18,3 +18,50 @@
   background: #0ff;
 }
 
+
+.inp {
+  border: 3px solid #000;
+}
+
+.demo-text-1 {
+  height: 150px;
+  background: #00f;
+}
+.demo-text-2 {
+  height: 150px;
+  background: #f00;
+}
+.demo-text-3 {
+  height: 150px;
+  background: #f0f;
+}
+.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;
+}
+
+.demo-1 {
+  width: 200px;
+  margin-left: 10px;
+  background: #00f;
+}
+.demo-2 {
+  width: 200px;
+  margin-left: 10px;
+  background: #0ff;
+}
+.demo-3 {
+  width: 200px;
+  margin-left: 10px;
+  background: #ff0;
+}