1.app.json
{
"pages":[
"pages/index/index",
"pages/logs/logs",
"pages/search/search",
"pages/user/user",
"pages/category/category"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#f00",
"navigationBarTitleText": "Weixin",
"navigationBarTextStyle":"black"
},
"tabBar": {
"selectedColor": "#f00",
"backgroundColor": "#eee",
"borderStyle": "black",
"color": "#8a8a8a",
"list": [
{
"pagePath": "pages/index/index",
"iconPath": "images/home.png",
"selectedIconPath": "/images/homeRed.png",
"text": "首页"
},
{
"pagePath": "pages/category/category",
"iconPath": "images/category.png",
"selectedIconPath": "/images/categoryRed.png",
"text": "分类"
},
{
"pagePath": "pages/search/search",
"iconPath": "images/shopping.png",
"selectedIconPath": "/images/shoppingRed.png",
"text": "购物车"
},
{
"pagePath": "pages/user/user",
"iconPath": "images/my.png",
"selectedIconPath": "/images/myRed.png",
"text": "我的"
}
]
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}
2.app.wxss(iconfont的引用)
@import '/styles/iconfont.wxss'
3.icon font链接
4.vantweapp链接
Cell 单元格 - Vant Weapp (youzan.github.io)
5.index.wxml
<searchInfo class="search"></searchInfo>
<swiper autoplay indicator-dots indicator-color="#fff" indicator-active-color="#ddd" interval="2000" class="swiper">
<swiper-item wx:for="{{swiper}}">
<navigator url="/pages/category/category">
<image class="pic" src="{{item.image_src}}" mode="widthFix"></image>
</navigator>
</swiper-item>
</swiper>
<!-- scroll-view -->
<view class="cates">
<!-- leftMenu -->
<scroll-view class="leftMenu" scroll-y>
<view class="leftItem {{sindex==index?'active':''}}" wx:for="{{leftMenu}}" bindtap="handleLeft" data-index="{{index}}">{{item}}</view>
</scroll-view>
<!-- rightMenu -->
<scroll-view class="rightMenu" scroll-y>
<view wx:for="{{rightMenu}}" wx:for-item="item1" wx:for-index="index1">
<view class="title">
/ {{item1.cat_name}} /
</view>
<van-grid column-num="3" icon-size="50px">
<van-grid-item wx:for="{{item1.children}}" wx:for-item="item2" wx:for-index="index2" icon="{{item2.cat_icon}}" text="{{item2.cat_name}}" />
</van-grid>
</view>
</scroll-view>
</view>
6.index.js
// index.js
// 获取应用实例
const app = getApp()
Page({
data: {
swiper:[],
sindex:0,
leftMenu:[],
rightMenu:[]
},
cates:[],
onLoad() {
let that = this
wx.request({
url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata',
success(res){
// console.log(res)
that.setData({
swiper:res.data.message
})
}
}),
wx.request({
url: 'https://api-hmugo-web.itheima.net/api/public/v1/categories',
success(res){
console.log(res)
that.cates = res.data.message
that.setData({
leftMenu:that.cates.map(v=>v.cat_name),
rightMenu:that.cates[0].children
})
}
})
},
handleLeft(e){
console.log(e)
let index = e.currentTarget.dataset.index
this.setData({
sindex:index,
rightMenu:this.cates[index].children
})
}
})
7.index.json
{
"usingComponents": {
"searchInfo":"/components/searchInfo/searchInfo",
"van-grid": "@vant/weapp/grid/index",
"van-grid-item": "@vant/weapp/grid-item/index"
}
}
8.index.wxss
.search{
position: fixed;
width: 100%;
left: 0;
top: 0;
z-index: 999;
}
.swiper{
margin-top: 100rpx;
height: 300rpx;
/* position: fixed;
width: 100%;
left: 0;
top: 0;
z-index: 999; */
}
.pic{
width: 100%;
}
.cates{
/* margin-top: 415rpx; */
display: flex;
height: calc(100vh - 100rpx);
}
.leftMenu{
flex: 1.6;
}
.leftItem{
height: 50rpx;
text-align: center;
line-height: 60rpx;
font-size: 30rpx;
}
.active{
color: red;
border-left: 5rpx solid red;
}
.rightMenu{
flex: 5;
}
.title{
display: flex;
justify-content: center;
align-items: center;
font-size: 30rpx;
}
9.searchInfo.wxml
<view class="search">
<navigator url="/pages/search/search">
<!-- <text class="iconfont icon-sousuo"></text> -->
<icon type="search" size="40rpx"></icon>
<text>搜索</text>
</navigator>
</view>
10.searchInfo.wxss
.search{
background-color: #f00;
height: 100rpx;
display: flex;
justify-content: center;
align-items: center;
}
.search navigator{
background-color: #fff;
border-radius: 13rpx;
height: 70rpx;
display: flex;
justify-content: center;
align-items: center;
width: 97%;
}
.search navigator text{
color: rgb(145, 143, 143);
}