Skip to content

Commit 502c5ea

Browse files
coderwhycoderwhy
committed
首页完成
1 parent 22d6818 commit 502c5ea

File tree

23 files changed

+331
-10
lines changed

23 files changed

+331
-10
lines changed

‎assets/common/arrow-right.png

2.15 KB
Loading

‎assets/common/favor.png

13.7 KB
Loading

‎assets/common/top.png

2.6 KB
Loading

‎components/w-back-top/w-back-top.js

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
// components/w-back-top/w-back-top.js
2+
Component({
3+
/**
4+
* 组件的属性列表
5+
*/
6+
properties: {
7+
8+
},
9+
10+
/**
11+
* 组件的初始数据
12+
*/
13+
data: {
14+
15+
},
16+
17+
/**
18+
* 组件的方法列表
19+
*/
20+
methods: {
21+
handleBackTop() {
22+
wx.pageScrollTo({
23+
scrollTop: 0,
24+
})
25+
}
26+
}
27+
})

‎components/w-back-top/w-back-top.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"component": true,
3+
"usingComponents": {}
4+
}

‎components/w-back-top/w-back-top.wxml

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<!--components/w-back-top/w-back-top.wxml-->
2+
<view class='back-top' bind:tap="handleBackTop">
3+
<image src="/assets/common/top.png"/>
4+
</view>

‎components/w-back-top/w-back-top.wxss

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
/* components/w-back-top/w-back-top.wxss */
2+
.back-top {
3+
position: fixed;
4+
right: 10rpx;
5+
bottom: 10rpx;
6+
}
7+
8+
.back-top image {
9+
width: 100rpx;
10+
height: 100rpx;
11+
}

‎components/w-goods-item/w-goods-item.js

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
// components/w-goods-item/w-goods-item.js
2+
Component({
3+
/**
4+
* 组件的属性列表
5+
*/
6+
properties: {
7+
item: {
8+
type: Object,
9+
value: {}
10+
}
11+
},
12+
13+
/**
14+
* 组件的初始数据
15+
*/
16+
data: {
17+
18+
},
19+
20+
/**
21+
* 组件的方法列表
22+
*/
23+
methods: {
24+
25+
}
26+
})

‎components/w-goods-item/w-goods-item.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"component": true,
3+
"usingComponents": {}
4+
}

‎components/w-goods-item/w-goods-item.wxml

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!--components/w-goods-item/w-goods-item.wxml-->
2+
<view class='goods-item'>
3+
<image class='image' src="{{item.show.img}}" mode="widthFix"/>
4+
<view class='desc-info'>
5+
<view class='title'>{{item.title}}</view>
6+
<view class='info'>
7+
<text class='price'>¥{{item.price}}</text>
8+
<image class='icon' src="/assets/common/favor.png"/>
9+
<text class='cfav'>{{item.cfav}}</text>
10+
</view>
11+
</view>
12+
</view>

‎components/w-goods-item/w-goods-item.wxss

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
/* components/w-goods-item/w-goods-item.wxss */
2+
.goods-item {
3+
text-align: center;
4+
color: #333;
5+
padding-bottom: 85rpx;
6+
}
7+
8+
.image {
9+
width: 100%;
10+
border-radius: 10rpx;
11+
}
12+
13+
.desc-info {
14+
position: absolute;
15+
left: 0;
16+
right: 0;
17+
bottom: 5rpx;
18+
}
19+
20+
.title {
21+
white-space: nowrap;
22+
overflow: hidden;
23+
text-overflow: ellipsis;
24+
font-size: 28rpx;
25+
}
26+
27+
.info {
28+
font-size: 26rpx;
29+
}
30+
31+
.info .price {
32+
color: #ff5777;
33+
/* padding-right: 10rpx; */
34+
}
35+
36+
.info .icon {
37+
width: 30rpx;
38+
height: 30rpx;
39+
padding: 0 6rpx 0 10rpx;
40+
position: relative;
41+
top: 5rpx;
42+
}
43+
44+
.cfav {
45+
/* padding-left: 10rpx; */
46+
position: relative;
47+
}
48+
49+
/* 注意事项: 在wxss中不能引用本地图片,只能引用网络图片 */
50+
/* .cfav::before {
51+
content: '';
52+
position: absolute;
53+
left: -15px;
54+
top: -1px;
55+
width: 14px;
56+
height: 14px;
57+
background: url(http://github.com/"/assets/common/favor.png") 0 0/14px 14px;
58+
} */

‎components/w-goods/w-goods.js

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
// components/w-goods/w-goods.js
2+
Component({
3+
/**
4+
* 组件的属性列表
5+
*/
6+
properties: {
7+
goods: {
8+
type: Array,
9+
value: []
10+
}
11+
},
12+
13+
/**
14+
* 组件的初始数据
15+
*/
16+
data: {
17+
18+
},
19+
20+
/**
21+
* 组件的方法列表
22+
*/
23+
methods: {
24+
25+
}
26+
})

‎components/w-goods/w-goods.json

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"component": true,
3+
"usingComponents": {
4+
"w-goods-item": "/components/w-goods-item/w-goods-item"
5+
}
6+
}

‎components/w-goods/w-goods.wxml

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<!--components/w-goods/w-goods.wxml-->
2+
<view class='goods'>
3+
<block wx:for="{{goods}}" wx:key="{{index}}">
4+
<w-goods-item class="item" item="{{item}}"/>
5+
</block>
6+
</view>

‎components/w-goods/w-goods.wxss

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
/* components/w-goods/w-goods.wxss */
2+
.goods {
3+
display: flex;
4+
flex-wrap: wrap;
5+
justify-content: space-evenly;
6+
}
7+
8+
.goods > .item {
9+
width: 48%;
10+
position: relative;
11+
margin-top: 16rpx;
12+
}
13+

‎components/w-tab-control/w-tab-control.wxss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22
.tab-control {
33
display: flex;
44
margin-bottom: 16rpx;
5+
background: #fff;
6+
padding-bottom: 10rpx;
57
}
68

79
.tab-item {

‎pages/home/childCpns/w-recommend/w-recommend.js

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,18 @@ Component({
1414
* 组件的初始数据
1515
*/
1616
data: {
17-
17+
isLoad: false
1818
},
1919

2020
/**
2121
* 组件的方法列表
2222
*/
2323
methods: {
24-
24+
handleImageLoad() {
25+
if (!this.data.isLoad) {
26+
this.triggerEvent('imageload')
27+
this.data.isLoad = true
28+
}
29+
}
2530
}
2631
})

‎pages/home/childCpns/w-recommend/w-recommend.wxml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<view class='recommend'>
33
<block wx:for="{{recommends}}" wx:key="{{index}}">
44
<view class='recommend-item'>
5-
<image src="{{item.image}}"/>
5+
<image src="{{item.image}}" bind:load="handleImageLoad"/>
66
<view>{{item.title}}</view>
77
</view>
88
</block>

‎pages/home/home.js

Lines changed: 93 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,120 @@
11
// pages/home/home.js
22
import {
3-
getMultiData
3+
getMultiData,
4+
getGoodsData
45
} from '../../service/home.js'
56

7+
const TOP_DISTANCE = 1000;
8+
const types = ['pop', 'new', 'sell']
9+
610
Page({
711
data: {
812
banners: [],
913
recommends: [],
10-
titles: ['流行', '新款', '精选']
14+
titles: ['流行', '新款', '精选'],
15+
goods: {
16+
pop: {page: 0, list: []},
17+
new: {page: 0, list: []},
18+
sell: {page: 0, list: []}
19+
},
20+
currentType: 'pop',
21+
showBackTop: false,
22+
isTabFixed: false,
23+
tabScrollTop: 0
1124
},
1225
onLoad: function (options) {
1326
// 1.请求轮播图以及推荐数据
27+
this._getMultidata()
28+
29+
// 2.请求商品数据
30+
this._getGoodsData('pop')
31+
this._getGoodsData('new')
32+
this._getGoodsData('sell')
33+
},
34+
// onShow: 页面显示出来的时回调的函数
35+
// 页面显示是否意味着所有的图片都加载完成
36+
onShow() {
37+
},
38+
39+
// ------------------- 网络请求函数 -------------------------
40+
_getMultidata() {
1441
getMultiData().then(res => {
1542
// 取出轮播图和推荐的数据
1643
const banners = res.data.data.banner.list;
1744
const recommends = res.data.data.recommend.list;
18-
45+
1946
// 将banners和recommends放到data中
2047
this.setData({
2148
banners,
2249
recommends
2350
})
2451
})
2552
},
53+
_getGoodsData(type) {
54+
// 1.获取页码
55+
const page = this.data.goods[type].page + 1;
56+
57+
// 2.发送网络请求
58+
getGoodsData(type, page).then(res => {
59+
// console.log(res)
60+
// 2.1.取出数据
61+
const list = res.data.data.list;
62+
63+
// 2.2.将数据设置到对应type的list中
64+
const oldList = this.data.goods[type].list;
65+
oldList.push(...list)
66+
67+
// 2.3.将数据设置到data中的goods中
68+
const typeKey = `goods.${type}.list`;
69+
const pageKey = `goods.${type}.page`;
70+
this.setData({
71+
[typeKey]: oldList,
72+
[pageKey]: page
73+
})
74+
})
75+
},
76+
77+
// ------------------- 事件监听函数 -------------------------
2678
handleTabClick(event) {
2779
// 取出index
2880
const index = event.detail.index;
29-
console.log(index)
81+
82+
// 设置currentType
83+
this.setData({
84+
currentType: types[index]
85+
})
86+
},
87+
handleImageLoad() {
88+
wx.createSelectorQuery().select('#tab-control').boundingClientRect(rect => {
89+
this.data.tabScrollTop = rect.top
90+
}).exec()
91+
},
92+
93+
onReachBottom() {
94+
// 上拉加载更多 -> 请求新的数据
95+
this._getGoodsData(this.data.currentType)
96+
},
97+
98+
onPageScroll(options) {
99+
// 1.取出scrollTop
100+
const scrollTop = options.scrollTop;
101+
// console.log(scrollTop)
102+
103+
// 2.修改showBackTop属性
104+
// 官方: 不要再滚动的函数回调中频繁的调用this.setData
105+
const flag1 = scrollTop >= TOP_DISTANCE;
106+
if (flag1 != this.data.showBackTop) {
107+
this.setData({
108+
showBackTop: flag1
109+
})
110+
}
111+
112+
// 3.修改isTabFixed属性
113+
const flag2 = scrollTop >= this.data.tabScrollTop;
114+
if (flag2 != this.data.isTabFixed) {
115+
this.setData({
116+
isTabFixed: flag2
117+
})
118+
}
30119
}
31120
})

‎pages/home/home.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22
"usingComponents": {
33
"w-swiper": "/components/w-swiper/w-swiper",
44
"w-tab-control": "/components/w-tab-control/w-tab-control",
5+
"w-goods": "/components/w-goods/w-goods",
6+
"w-back-top": "/components/w-back-top/w-back-top",
57
"w-recommend": "./childCpns/w-recommend/w-recommend",
68
"w-popular": "./childCpns/w-popular/w-popular"
79
},

0 commit comments

Comments
 (0)