首页静态页面

app.wxss

@@ -5,7 +5,7 @@
   flex-direction: column;
   align-items: center;
   justify-content: space-between;
-  padding: 200rpx 0;
+  padding: 80rpx 0;
   box-sizing: border-box;
-
+  background: #f0f1f5
 } 

component/follow/follow.js

@@ -1,15 +1,9 @@
-//index.js
-//获取应用实例
-const app = getApp()
+export const followInit =  (that) => {
+  that.setData({
+    followData: {
+      title: '关注'
+    }
+  })
+  //请求数据封装
 
-Page({
-  data: {
-
-  },
-  onReady: function(res){
-    
-  },
-  //事件处理函数
-  onLoad: function () {
-  }
-})
+}

component/follow/follow.wxml

@@ -1,9 +1,3 @@
-<view >
-<h2>关注</h2>
-<h2>关注</h2>
-<h2>关注</h2>
-<h2>关注</h2>
-<h2>关注</h2>
-<h2>关注</h2>
-<h2>关注</h2>
-</view>
+<template name="follow">
+  <view> follw 关注 </view>
+</template>

component/hot/hot.js

@@ -1,62 +1,107 @@
-export const hotInit =  (that) => {
-    that.setData({
+export const hotInit = (that) => {
+  that.setData({
       hotData: {
-        nav: [],
-        hotIndex: 0,
-        hotList: [],
-        left: ''
+        title: '热门',
+        imgUrls: [
+          'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
+          'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
+          'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
+        ],
+        indicatorDots: true,
+        autoplay: true,
+        interval: 5000,
+        duration: 700,
+        circular: true,
+        hotSearch: '鹅鹅鹅',
+        wareCards:[
+          {
+            title:"铺满金色巴掌的水泥道",
+            grade:"一年级 上学期",
+            img: "../../static/image/timg.jpg",
+            plays: "1",
+            likes: "2"
+          },
+          {
+            title:"铺满金色巴掌的水泥道",
+            grade:"一年级 上学期",
+            img: "../../static/image/timg.jpg",
+            plays: "12345",
+            likes: "54321"
+          },
+          {
+            title:"铺满金色巴掌的水泥道",
+            grade:"一年级 上学期",
+            img: "../../static/image/timg.jpg",
+            plays: "12345",
+            likes: "54321"
+          },
+          {
+            title:"铺满金色巴掌的水泥道",
+            grade:"一年级 上学期",
+            img: "../../static/image/timg.jpg",
+            plays: "12345",
+            likes: "54321"
+          },
+          {
+            title:"铺满金色巴掌的水泥道",
+            grade:"一年级 上学期",
+            img: "../../static/image/timg.jpg",
+            plays: "12345",
+            likes: "54321"
+          },
+          {
+            title:"铺满金色巴掌的水泥道",
+            grade:"一年级 上学期",
+            img: "../../static/image/timg.jpg",
+            plays: "12345",
+            likes: "54321"
+          },
+          {
+            title:"铺满金色巴掌的水泥道",
+            grade:"一年级 上学期",
+            img: "../../static/image/timg.jpg",
+            plays: "12345",
+            likes: "54321"
+          },
+          {
+            title:"铺满金色巴掌的水泥道",
+            grade:"一年级 上学期",
+            img: "../../static/image/timg.jpg",
+            plays: "12345",
+            likes: "54321"
+          },
+          {
+            title:"铺满金色巴掌的水泥道",
+            grade:"一年级 上学期",
+            img: "../../static/image/timg.jpg",
+            plays: "12345",
+            likes: "54321"
+          },
+          {
+            title:"铺满金色巴掌的水泥道",
+            grade:"一年级 上学期",
+            img: "../../static/image/timg.jpg",
+            plays: "12345",
+            likes: "54321"
+          },
+          {
+            title:"铺满金色巴掌的水泥道",
+            grade:"一年级 上学期",
+            img: "../../static/image/timg.jpg",
+            plays: "12345",
+            likes: "54321"
+          }
+        ]
       }
-    })
-    //点击更改数据
-    that.hotChoice = ({ currentTarget }) => {
-      that.data.hotData.hotInd = currentTarget.dataset.index;
-      if (that.data.hotData.nav.length > 3 && currentTarget.dataset.index == 2) {
-        that.data.hotData.left = currentTarget.dataset.index * 225;
-      }
-      if (that.data.hotData.nav.length > 3 && currentTarget.dataset.index == 1) {
-        that.data.hotData.left = '';
-      }
-      that.setData({
-        hotData: that.data.hotData
-      })
-      //数据请求
-      that.httpList(currentTarget.dataset.index + 1)
-    }
-    //滑动更改数据
-    that.lookSlide = ({ detail }) => {
-      that.data.hotData.hotInd = detail.current;
-      if (that.data.hotData.nav.length > 3 && detail.current == 2) {
-        that.data.hotData.left = detail.current * 225;
-      }
-      if (that.data.hotData.nav.length > 3 && detail.current == 1) {
-        that.data.hotData.left = '';
-      }
-      // console.log(detail.current);
+    }),
+    that.searchHandler = () => {
+      console.log('搜索按钮')
+      console.log(that.data.hotInput);
+    },
+    that.inputHandler = (e) => {
       that.setData({
-        hotData: that.data.hotData
-      })
-      that.httpList(detail.current + 1)
-    }
-    //跳转到详情页
-    that.details = ({ currentTarget }) => {
-      const id = currentTarget.dataset.id;
-      wx.navigateTo({
-        url: '/pages/details/details?id=' + id 
-      })
-    }
-    //请求数据封装
-    that.httpList = (ind) => {
-      httpRequestApi.getCourse({
-        categoryId: ind
-      }).success((res)=>{
-        console.log('课程列表', res);
-        that.data.hotData.hotList = res.data.data.list;
-        that.setData({
-            hotData: that.data.hotData
-        })
-      })
+        hotInput: e.detail.value
+      });
+      console.log(that.data.hotInput)
     }
-
-    //初始数据
-    that.httpList(1)
-  }
+}

component/hot/hot.wxml

@@ -1,3 +1,39 @@
-<view >
-<h1>热门</h1>
-</view>
+<template name="hot">
+    <swiper indicator-dots="{{hotData.indicatorDots}}" autoplay="{{hotData.autoplay}}" interval="{{hotData.interval}}" duration="{{hotData.duration}}" circular="{{hotData.circular}}">
+        <block wx:for="{{hotData.imgUrls}}" wx:key="{{index}}">
+            <swiper-item>
+                <image src="{{item}}" class="slide-image" width="750" height="318" />
+            </swiper-item>
+        </block>
+    </swiper>
+    <view class="searchSection">
+        <input bindinput="inputHandler" bindconfirm="searchHandler" placeholder="{{hotData.hotSearch}}" placeholder-style="text-indent:20rpx" confirm-type="search"></input>
+        <button bindtap="searchHandler" class="searchBtn" plain="{{true}}">
+            <icon type="search" size="17" />
+        </button>
+        <view class="allBooks" bindtap="goToBooks">全部课本</view>
+    </view>
+    <view class="hotSection">
+        <view class="title">
+            <image src="../../static/image/hot_recommand.png" alt="" />
+            <text>热门推荐</text>
+        </view>
+        <view class="hotWares"  style="flex-direction:row;">
+            <view class="hotWareCard" wx:for="{{hotData.wareCards}}">
+                <image class="wareCardImg" src="{{item.img}}" />
+                <text class="wareCardTitle">{{item.title}}</text>
+                <text class="wareCardTip">{{item.grade}}</text>
+                <view class="bottomData">
+                    <view class="wareCardPlays">
+                        <image class="wareCardPlaysImg" src="../../static/image/hotPlays.png" />
+                        <text>{{item.plays}}</text>
+                    </view>
+                    <view class="wareCardLikes">
+                        <image class="wareCardLikesImg" src="../../static/image/like.png" />
+                        <text>{{item.likes}}</text>
+                    </view>
+                </view>
+            </view>
+        </view>
+    </view>
+</template>

component/hot/hot.wxss

@@ -0,0 +1,157 @@
+swiper {
+    background: red;
+    display: block;
+    width: 100%;
+    height: 318rpx;
+}
+
+.slide-image {
+    display: block;
+    width: 100%;
+    height: 100%;
+}
+
+.searchSection {
+    width: 748rpx;
+    height: 84rpx;
+    display: flex;
+    align-items: center;
+    background: #fff
+}
+
+.searchSection input {
+    display: flex;
+    width: 536rpx;
+    height: 56rpx;
+    border-radius: 10rpx;
+    background: #F0F1F5;
+    color: #717171;
+    font-size: 28rpx;
+    margin-left: 14rpx;
+    text-indent: 20rpx;
+}
+
+.searchSection .searchBtn {
+    /* background: #fff; */
+    position: absolute;
+    z-index: 2;
+    right: 200rpx;
+    width: 56rpx;
+    height: 56rpx;
+    border: 1rpx solid rgba(255, 255, 255, 0);
+}
+
+.searchSection .searchBtn icon {
+    position: absolute;
+    top: 10rpx;
+    right: 15rpx;
+}
+.searchSection .allBooks{
+    font-size: 28rpx;
+    color:#61ca54;
+    font-family: PingFangSC-regular;
+    width: 112rpx;
+    margin-left: 56rpx;
+}
+.hotSection{
+    width: 100%;
+    /* height: 50rpx; */
+    background: #fff;
+    margin-top: 8rpx;
+}
+.hotSection .title{
+    display: flex;
+    align-items: center;
+    margin: 20rpx 0 20rpx 20rpx;
+}
+.hotSection .title image {
+    /* margin-left: 24rpx; */
+    width: 34rpx;
+    height: 38rpx;
+}
+.hotSection .title text{
+    width: 112rpx;
+    height: 40rpx;
+    margin-left: 12rpx;
+    font-size: 28rpx;
+    line-height: 50rpx;
+    font-family: PingFangSC-regular;
+    color:#101010 
+}
+.hotWares{
+    display: flex;
+    flex-wrap: wrap;
+}
+.hotSection .hotWares .hotWareCard{
+    position: relative;
+    overflow: hidden;
+    width: 352rpx;
+    height: 322rpx;
+    margin: 0 0 18rpx 16rpx;
+    box-shadow: 0 8rpx 6rpx 0 rgba(0, 0, 0, .28);
+}
+.hotWareCard .wareCardImg{
+    width: 100%;
+    height: 200rpx;
+}
+.hotWareCard .wareCardTitle{
+    margin: 0 auto;
+    width: 320rpx;
+    height: 46rpx;
+    display:block; 
+    text-align: center;
+    color: rgba(16,16,16,1);
+    font-size: 32rpx;
+}
+.hotWareCard .wareCardTip{
+   position: absolute;
+   top: 10rpx;
+   right: 4rpx;
+   z-index: 2;
+    width: 178rpx;
+    height: 40rpx;
+    display:block; 
+    text-align: center;
+    color: rgba(16,16,16,1);
+    font-size: 28rpx;
+}
+.bottomData{
+    height: 34rpx;
+    margin-top: 10rpx;
+    display: flex;
+    /* flex-direction: row; */
+    justify-content:space-between;
+    align-items: center;
+}
+.hotWareCard .wareCardPlays{
+    width: 100rpx;
+    margin-left: 18rpx;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+.hotWareCard .wareCardPlays .wareCardPlaysImg{
+    width: 30rpx;
+    height: 30rpx;
+}
+.hotWareCard .wareCardPlays text {
+    margin-left: 4rpx;
+    color: #61CA54;
+    font-size: 24rpx;
+}
+.hotWareCard .wareCardLikes{
+    width: 100rpx;
+    margin-right: 18rpx;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+.hotWareCard .wareCardLikes .wareCardLikesImg{
+    width: 30rpx;
+    height: 30rpx;
+}
+.hotWareCard .wareCardLikes text {
+    margin-left: 4rpx;
+    color: #FF9800;
+    font-size: 24rpx;
+}

component/my/my.js

@@ -1,15 +1,9 @@
-//index.js
-//获取应用实例
-const app = getApp()
+export const myInit =  (that) => {
+  that.setData({
+    myData: {
+      title: '我的'
+    }
+  })
+  //请求数据封装
 
-Page({
-  data: {
-
-  },
-  onReady: function(res){
-    
-  },
-  //事件处理函数
-  onLoad: function () {
-  }
-})
+}

component/my/my.wxml

@@ -1,9 +1,3 @@
-<view >
-<h1>我的</h1>
-<h1>我的</h1>
-<h1>我的</h1>
-<h1>我的</h1>
-<h1>我的</h1>
-<h1>我的</h1>
-<h1>我的</h1>
-</view>
+<template name="my">
+  <view> my {{myData.title}} </view>
+</template>

pages/index/index.js

@@ -2,8 +2,8 @@
 //获取应用实例
 const app = getApp()
 import { hotInit } from '../../component/hot/hot';
-// import { myInit } from '../../component/my/my';
-// import { searchInit } from '../../component/follow/follow';
+import { myInit } from '../../component/my/my';
+import { followInit } from '../../component/follow/follow';
 // import httpRequestApi from '../../utils/APIRequest';
 // import httputil from '../../utils/httputil';
 Page({
@@ -22,46 +22,39 @@ Page({
         templates: 'my',
       }
     ],
-    ind: 0,
+    myIndex: 0,
     templates: 'hot',
-    jurisdictionFlag: true
+    title:'index中的title',
+    jurisdictionFlag: true,
+    hotInput:'12345'
   },
   //tab点击
   switcher: function({currentTarget}) {
-    let index = currentTarget.dataset.index;
-    let templates = this.data.tab[index].templates;
-    //console.log(this.data[ind])
+    this.updateData(currentTarget.dataset.index);
+  },
+  // 根据index 更新template
+  updateData:function(index){
+    let myIndex = index;
+    let templates = this.data.tab[myIndex].templates;
     this.setData({
-      index,
+      myIndex,
       templates
-    })
-    if (index == 1) {
-      searchInit(this);
+    });
+    if (myIndex == 0) {
+      hotInit(this);
+    }
+    if (myIndex == 1) {
+      followInit(this);
     }
-    if (index == 2) {
+    if (myIndex == 2) {
       myInit(this);
     }
   },
-  jurisdiction: function () {
-    setTimeout(()=>{
-      this.init();
-    },1000)
-  },
   onLoad: function (options) {
     if(options.index) {
-      let index = options.index;
-      let templates = this.data.tab[index].templates;
-      this.setData({
-        templates,
-        index,
-      })
-      if (index == 1) {
-        searchInit(this);
-      }
-      if (index == 2) {
-        myInit(this);
-      }
+      this.updateData(options.index)
     }
+    hotInit(this)
     this.init();
   },
   //初始化数据

pages/index/index.wxml

@@ -1,25 +1,26 @@
-<!--index.wxml-->
+<!-- index.wxml -->
 <view class="container">
   <!-- 引入组件 -->
-  <import src="/component/hot/hot.wxml"/>
-  <!-- <import src="/component/follow/follow.wxml"/>  -->
-  <!-- <import src="/component/my/my.wxml"/>   -->
-  <!--调用组件-->
-  <!--<template is="{{templates}}" data="{{lookData: lookData, searchData: searchData, myData: myData}}"></template>-->
-  <view class="template" wx:if="{{templates == 'hot'}}">
-    <template is="{{templates}}" data="{{hotData: hotData}}"></template>
+  <import src="/component/hot/hot.wxml" />
+  <import src="/component/follow/follow.wxml" />
+  <import src="/component/my/my.wxml" />
+  <!-- 调用组件 -->
+  <template is="{{templates}}" data="{{hotData: hotData, followData: followData, myData: myData}}"></template>
+  <!-- 顶部导航 -->
+  <view class="top-tab">
+    <block wx:for="{{tab}}" wx:key="{{index}}">
+      <view class="tabbar {{index == myIndex ? 'select':' '}}" bindtap="switcher" data-index="{{index}}">
+        <text>{{item.name}}</text>
+      </view>
+    </block>
+  </view>
+  <!-- <view class="template" wx:if="{{templates == 'hot'}}">
+    <template is="{{templates}}" data="{{...hotData}}"></template>
   </view>
   <view class="template" wx:elif="{{templates == 'follow'}}">
     <template is="{{templates}}" data="{{followData: followData}}"></template>
   </view>
   <view class="template" wx:else="{{templates == 'my'}}">
     <template is="{{templates}}" data="{{myData: myData}}"></template>
-  </view>
-  <view class="top-tab">
-      <block  wx:for="{{tab}}" wx:key="{{index}}">
-      <view class="tabbar {{index == ind ? 'select':' '}}" bindtap="switcher" data-ind="{{index}}">
-          <text>{{item.name}}</text>
-      </view>
-      </block>            
-  </view>
-</view>
+  </view> -->
+</view>

pages/index/index.wxss

@@ -1,6 +1,6 @@
 /**index.wxss**/
 /*看*/
-/* @import "/component/look/look.wxss"; */
+@import "/component/hot/hot.wxss";
 /*搜索*/
 /* @import "/component/search/search.wxss"; */
 /*我的*/