效果演示
步骤1:从后端获取数据
let promise= getRequest ( 'https://api-hmugo-web.itheima.net/api/public/v1/categories' )
promise. then ( ( res) => {
console. log ( res)
this . setData ( {
classifyData: res. data. message
} )
} )
步骤2:将导航数据渲染到页面
< view class = " classifyContent" >
< scroll-view class = " scrollAreaLeft" scroll-y = " {{true}}" >
< view class = " titel" wx: for= " {{classifyData}}" wx: key= " index" >
< view class = " classifySlideLeft" bindtap = " showContent" data-catid = " {{item.cat_id}}" > {{item.cat_name}}</ view>
</ view>
</ scroll-view>
< scroll-view class = " scrollAreaRight" scroll-y = " {{true}}" >
< view class = " classifySlideRight" wx: for= " {{selectData.children}}" wx: key= " index" >
< view > {{item.cat_name}}</ view>
< view class = " sectionProduct" >
< view class = " childerProduct" wx: for= " {{item.children}}" wx: key= " index" >
< image mode = " widthFix" class = " detailPic" src = " {{item.cat_icon}}" />
< text > {{item.cat_name}}</ text>
</ view>
</ view>
</ view>
</ scroll-view>
</ view>
步骤3:点击导航标题出现相关类目
showContent: function ( e) {
console. log ( e)
let id= e. currentTarget. dataset. catid
let arr= this . data. classifyData
let index= 0
for ( let i in arr) {
if ( id== arr[ i] . cat_id) {
index= i
}
}
this . setData ( {
selectData: arr[ index]
} )
}
步骤4:点击进入产品列表
goDetail: function ( e) {
let id= e. currentTarget. dataset. pid
wx. navigateTo ( {
url: '../../pages/goodlist/goodlist?pid=' + id,
} ) ;
}