1. 项目目录结构的划分
1.1 页面结构的划分
"pages": [
"pages/home/home",
"pages/category/category",
"pages/cart/cart",
"pages/profile/profile"
],
2.首页模块
2.1 首页轮播图
2.1.1 轮播图组件在首页的应用
home.json
"usingComponents": {
"ld-swiper":
"/components/ld-swiper/ld-swiper",
"ld-recommend":
"/pages/home/childCpns/ld-recommend/ld-recommend"
}
home.wxml
<!-- 1. 展示轮播图 -->
<ld-swiper
list="{{banners}}"
>
</ld-swiper>
2.1.2 轮播图组件的封装
ld-swiper.wxml
<swiper class="swiper"
circular
autoplay
interval="2000"
indicator-dots
indicator-active-color="#ff5777"
style='height:200px'
>
<block
wx:for="{{list}}"
wx:key="index"
>
<swiper-item class="swiper-item">
<image src="{{item.image}}"
mode="widthFix">
</image>
</swiper-item>
</block>
</swiper>
ld-recommend.js
Component({
/**
* 组件的属性列表
*/
properties: {
recommends:{
type: Array,
value:[]
}
}
})
ld-recommend.wxss
.recommend {
display: flex;
flex-direction: row;
margin-top: 30rpx;
border-bottom: 16rpx solid #eee;
padding: 16rpx;
}
.recommend-item {
flex: 1;
text-align: center;
}
.recommend-item image {
width: 160rpx;
height: 160rpx;
}
2.2 首页TabControl
<view class="tab-control">
<block wx:for="{{titles}}"
wx:key = "index">
<view
class="tab-item
{{currentIndex == index?
'active' : ''}}"
bindtap="handleItemClick"
data-index="{{index}}"
>
<text>{{item}}</text>
</view>
</block>
</view>
.tab-control {
display: flex;
flex-direction: row;
height: 88rpx;
line-height: 88rpx;
background-color: cyan;
}
.tab-item {
flex: 1;
text-align: center;
}
.active {
color: red;
}
.active text {
padding: 20rpx 10rpx;
border-bottom: 6rpx solid red;
}
Component({
/**
* 组件的属性列表
*/
properties: {
titles: {
type: Array,
value: []
}
},
/**
* 组件的初始数据
*/
data: {
currentIndex: 0
},
/**
* 组件的方法列表
*/
methods: {
handleItemClick(event) {
const index =
event.currentTarget.dataset.index
this.setData({
currentIndex: index
})
this.triggerEvent(
'tab-item-click',
{index:index,title:this.properties.titles[index]},
{})
}
}
})
<!-- 4. tab-control -->
<w-tab-control
titles="{{titles}}"
bind:tab-item-click=
"handleTabClick"
class="{{isTabFiexd ? 'fiexd' : '' }}"
id="tab-control"
>
</w-tab-control>
<w-tab-control
titles="{{titles}}"
wx:if="{{isTabFixed}}"
>
</w-tab-control>
<!-- 5.展示商品 -->
<view class="goods">
<block
wx:for="{{goods[currentType].list}}"
>
<w-goods-item class="goods-item"
item='{{item}}'>
</w-goods-item>
</block>
</view>
<!-- 6.回到顶部 -->
<w-back-top class="back"
wx:if="{{isShow}}">
</w-back-top>
2.3 展示商品
<view class="goods-item">
<image
class="image"
src="{{item.img}}"
mode='widthFix'>
</image>
<view class="desc-info">
<view class="title">
{{item.title}}
</view>
</view>
</view>
.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;
}
2.4 回到顶部
methods: {
handleBack(){
console.log('回到顶部')
wx.pageScrollTo({
scrollTop:0,
duration: 1000,
})
}
}
})
onPageScroll(option) {
const scrollTop =
option.scrollTop
const flag = scrollTop >= 1000
if (flag != this.data.isShow)
{
this.setData({
isShow: scrollTop >= 1000
})
}
}
2.5 Tab-Control的停留效果
<!-- 4. tab-control -->
<w-tab-control
titles="{{titles}}"
bind:tab-item-click=
"handleTabClick"
class="{{isTabFiexd ?
'fiexd' : '' }}"
id="tab-control"
>
</w-tab-control>
<w-tab-control
titles="{{titles}}"
wx:if="{{isTabFixed}}"
>
</w-tab-control>
handleImageLoad() {
console.log('图片加载完成')
wx.createSelectorQuery().
select('#tab-control')
.boundingClientRect(rect =>
{
console.log(rect)
this.data.tabScrollTop =
rect.top
}).exec()
}
onPageScroll(option) {
// 修改isTabFixed属性
const flag2 =
scrollTop >= this.data.tabScrollTop
console.log(flag2)
if (flag2 != this.data.isTabFiexd) {
this.setData({
isTabFiexd: flag2
})
}
}
