首页完成

coderwhy · coderwhy · commit 502c5ea28bf4 · 2019-07-01T22:31:31.000+08:00
diff --git a/assets/common/arrow-right.png b/assets/common/arrow-right.png
diff --git a/assets/common/favor.png b/assets/common/favor.png
diff --git a/assets/common/top.png b/assets/common/top.png
diff --git a/components/w-back-top/w-back-top.js b/components/w-back-top/w-back-top.js
@@ -0,0 +1,27 @@
+// components/w-back-top/w-back-top.js
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    handleBackTop() {
+      wx.pageScrollTo({
+        scrollTop: 0,
+      })
+    }
+  }
+})
diff --git a/components/w-back-top/w-back-top.json b/components/w-back-top/w-back-top.json
@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}
diff --git a/components/w-back-top/w-back-top.wxml b/components/w-back-top/w-back-top.wxml
@@ -0,0 +1,4 @@
+<!--components/w-back-top/w-back-top.wxml-->
+<view class='back-top' bind:tap="handleBackTop">
+  <image src="/assets/common/top.png"/>
+</view>
diff --git a/components/w-back-top/w-back-top.wxss b/components/w-back-top/w-back-top.wxss
@@ -0,0 +1,11 @@
+/* components/w-back-top/w-back-top.wxss */
+.back-top {
+  position: fixed;
+  right: 10rpx;
+  bottom: 10rpx;
+}
+
+.back-top image {
+  width: 100rpx;
+  height: 100rpx;
+}
diff --git a/components/w-goods-item/w-goods-item.js b/components/w-goods-item/w-goods-item.js
@@ -0,0 +1,26 @@
+// components/w-goods-item/w-goods-item.js
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    item: {
+      type: Object,
+      value: {}
+    }
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+
+  }
+})
diff --git a/components/w-goods-item/w-goods-item.json b/components/w-goods-item/w-goods-item.json
@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}
diff --git a/components/w-goods-item/w-goods-item.wxml b/components/w-goods-item/w-goods-item.wxml
@@ -0,0 +1,12 @@
+<!--components/w-goods-item/w-goods-item.wxml-->
+<view class='goods-item'>
+  <image class='image' src="{{item.show.img}}" mode="widthFix"/>
+  <view class='desc-info'>
+    <view class='title'>{{item.title}}</view>
+    <view class='info'>
+      <text class='price'>¥{{item.price}}</text>
+      <image class='icon' src="/assets/common/favor.png"/>
+      <text class='cfav'>{{item.cfav}}</text>
+    </view>
+  </view>
+</view>
diff --git a/components/w-goods-item/w-goods-item.wxss b/components/w-goods-item/w-goods-item.wxss
@@ -0,0 +1,58 @@
+/* components/w-goods-item/w-goods-item.wxss */
+.goods-item {
+  text-align: center;
+  color: #333;
+  padding-bottom: 85rpx;
+}
+
+.image {
+  width: 100%;
+  border-radius: 10rpx;
+}
+
+.desc-info {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 5rpx;
+}
+
+.title {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 28rpx;
+}
+
+.info {
+  font-size: 26rpx;
+}
+
+.info .price {
+  color: #ff5777;
+  /* padding-right: 10rpx; */
+}
+
+.info .icon {
+  width: 30rpx;
+  height: 30rpx;
+  padding: 0 6rpx 0 10rpx;
+  position: relative;
+  top: 5rpx;
+}
+
+.cfav {
+  /* padding-left: 10rpx; */
+  position: relative;
+}
+
+/* 注意事项: 在wxss中不能引用本地图片,只能引用网络图片 */
+/* .cfav::before {
+  content: '';
+  position: absolute;
+  left: -15px;
+  top: -1px;
+  width: 14px;
+  height: 14px;
+  background: url("/assets/common/favor.png") 0 0/14px 14px;
+} */
diff --git a/components/w-goods/w-goods.js b/components/w-goods/w-goods.js
@@ -0,0 +1,26 @@
+// components/w-goods/w-goods.js
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    goods: {
+      type: Array,
+      value: []
+    }
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+
+  }
+})
diff --git a/components/w-goods/w-goods.json b/components/w-goods/w-goods.json
@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "w-goods-item": "/components/w-goods-item/w-goods-item"
+  }
+}
diff --git a/components/w-goods/w-goods.wxml b/components/w-goods/w-goods.wxml
@@ -0,0 +1,6 @@
+<!--components/w-goods/w-goods.wxml-->
+<view class='goods'>
+  <block wx:for="{{goods}}" wx:key="{{index}}">
+    <w-goods-item class="item" item="{{item}}"/>
+  </block>
+</view>
diff --git a/components/w-goods/w-goods.wxss b/components/w-goods/w-goods.wxss
@@ -0,0 +1,13 @@
+/* components/w-goods/w-goods.wxss */
+.goods {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-evenly;
+}
+
+.goods > .item {
+  width: 48%;
+  position: relative;
+  margin-top: 16rpx;
+}
+
diff --git a/components/w-tab-control/w-tab-control.wxss b/components/w-tab-control/w-tab-control.wxss
@@ -2,6 +2,8 @@
 .tab-control {
   display: flex;
   margin-bottom: 16rpx;
+  background: #fff;
+  padding-bottom: 10rpx;
 }
 
 .tab-item {
diff --git a/pages/home/childCpns/w-recommend/w-recommend.js b/pages/home/childCpns/w-recommend/w-recommend.js
@@ -14,13 +14,18 @@ Component({
    * 组件的初始数据
    */
   data: {
-
+    isLoad: false
   },
 
   /**
    * 组件的方法列表
    */
   methods: {
-
+    handleImageLoad() {
+      if (!this.data.isLoad) {
+        this.triggerEvent('imageload')
+        this.data.isLoad = true
+      }
+    }
   }
 })
diff --git a/pages/home/childCpns/w-recommend/w-recommend.wxml b/pages/home/childCpns/w-recommend/w-recommend.wxml
@@ -2,7 +2,7 @@
 <view class='recommend'>
   <block wx:for="{{recommends}}" wx:key="{{index}}">
     <view class='recommend-item'>
-      <image src="{{item.image}}"/>
+      <image src="{{item.image}}" bind:load="handleImageLoad"/>
       <view>{{item.title}}</view>
     </view>
   </block>
diff --git a/pages/home/home.js b/pages/home/home.js
@@ -1,31 +1,120 @@
 // pages/home/home.js
 import {
- getMultiData
+ getMultiData,
+ getGoodsData
 } from '../../service/home.js'
 
+const TOP_DISTANCE = 1000;
+const types = ['pop', 'new', 'sell']
+
 Page({
   data: {
     banners: [],
     recommends: [],
-    titles: ['流行', '新款', '精选']
+    titles: ['流行', '新款', '精选'],
+    goods: {
+      pop: {page: 0, list: []},
+      new: {page: 0, list: []},
+      sell: {page: 0, list: []}
+    },
+    currentType: 'pop',
+    showBackTop: false,
+    isTabFixed: false,
+    tabScrollTop: 0
   },
   onLoad: function (options) {
     // 1.请求轮播图以及推荐数据
+    this._getMultidata()
+
+    // 2.请求商品数据
+    this._getGoodsData('pop')
+    this._getGoodsData('new')
+    this._getGoodsData('sell')
+  },
+  // onShow: 页面显示出来的时回调的函数
+  // 页面显示是否意味着所有的图片都加载完成
+  onShow() {
+  },
+
+  // ------------------- 网络请求函数 -------------------------
+  _getMultidata() {
     getMultiData().then(res => {
       // 取出轮播图和推荐的数据
       const banners = res.data.data.banner.list;
       const recommends = res.data.data.recommend.list;
-      
+
       // 将banners和recommends放到data中
       this.setData({
         banners,
         recommends
       })
     })
   },
+  _getGoodsData(type) {
+    // 1.获取页码
+    const page = this.data.goods[type].page + 1;
+
+    // 2.发送网络请求
+    getGoodsData(type, page).then(res => {
+      // console.log(res)
+      // 2.1.取出数据
+      const list = res.data.data.list;
+
+      // 2.2.将数据设置到对应type的list中
+      const oldList = this.data.goods[type].list;
+      oldList.push(...list)
+
+      // 2.3.将数据设置到data中的goods中
+      const typeKey = `goods.${type}.list`;
+      const pageKey = `goods.${type}.page`;
+      this.setData({
+        [typeKey]: oldList,
+        [pageKey]: page
+      })
+    })
+  },
+
+  // ------------------- 事件监听函数 -------------------------
   handleTabClick(event) {
     // 取出index
     const index = event.detail.index;
-    console.log(index)
+
+    // 设置currentType
+    this.setData({
+      currentType: types[index]
+    })
+  },
+  handleImageLoad() {
+    wx.createSelectorQuery().select('#tab-control').boundingClientRect(rect => {
+      this.data.tabScrollTop = rect.top
+    }).exec()
+  },
+
+  onReachBottom() {
+    // 上拉加载更多 -> 请求新的数据
+    this._getGoodsData(this.data.currentType)
+  },
+
+  onPageScroll(options) {
+    // 1.取出scrollTop
+    const scrollTop = options.scrollTop;
+    // console.log(scrollTop)
+
+    // 2.修改showBackTop属性
+    // 官方: 不要再滚动的函数回调中频繁的调用this.setData
+    const flag1 = scrollTop >= TOP_DISTANCE;
+    if (flag1 != this.data.showBackTop) {
+      this.setData({
+        showBackTop: flag1
+      })
+    }
+
+    // 3.修改isTabFixed属性
+    const flag2 = scrollTop >= this.data.tabScrollTop;
+    if (flag2 != this.data.isTabFixed) {
+      this.setData({
+        isTabFixed: flag2
+      })
+    }
   }
 })
diff --git a/pages/home/home.json b/pages/home/home.json
@@ -2,6 +2,8 @@
   "usingComponents": {
     "w-swiper": "/components/w-swiper/w-swiper",
     "w-tab-control": "/components/w-tab-control/w-tab-control",
+    "w-goods": "/components/w-goods/w-goods",
+    "w-back-top": "/components/w-back-top/w-back-top",
     "w-recommend": "./childCpns/w-recommend/w-recommend",
     "w-popular": "./childCpns/w-popular/w-popular"
   },
diff --git a/pages/home/home.wxml b/pages/home/home.wxml
diff --git a/pages/home/home.wxss b/pages/home/home.wxss
diff --git a/service/home.js b/service/home.js

-Original file line number
+Diff line change
@@ @@ -0,0 +1,4 @@ @@
 +{
 +  "component": true,
 +  "usingComponents": {}
 +}