79 lines
2.2 KiB
Vue
79 lines
2.2 KiB
Vue
<template>
|
||
<view>
|
||
<view class="header">
|
||
<view class="search" @click="tosearch()">
|
||
<i class="iconfont"></i>
|
||
<span>搜索百万免费菜谱</span>
|
||
</view>
|
||
</view>
|
||
<scroll-view class="left" scroll-y>
|
||
<view class="title" v-for="(v,i) in leftMenudata" :key="i" :class="{active:i==classname?isActive:!isActive}" @click="getright(v,i)">
|
||
<i class="aaa" :style="{'background-position-y':v.position*2-1+'rpx'}"
|
||
|
||
|
||
></i>
|
||
<span>{{v.title}}</span>
|
||
</view>
|
||
</scroll-view>
|
||
<view class="right" v-if="leftMenudata[classname]">
|
||
<view class="title_a" v-for="(v,i) in leftMenudata[classname].content" @click="torightMenuList(v)">
|
||
<image :src="v.img"></image>
|
||
<span class="">{{v.title}}</span>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
leftMenudata:[],
|
||
classname:0,//这个是下标
|
||
isActive:true,
|
||
}
|
||
},
|
||
async onLoad() {
|
||
await this.getleftMenu()
|
||
this.getrightMenudata()
|
||
},
|
||
methods: {
|
||
//TODO 第18行的判断有点看不懂去掉出bug，应该是渲染速度比数据请求快的问题 这个是判断它是否存在吗？
|
||
async getleftMenu() {
|
||
this.leftMenudata = await this.$http.index.leftMenu()
|
||
console.log("left",this.leftMenudata)
|
||
},
|
||
async getrightMenudata() {
|
||
if(this.leftMenudata[this.classname].content.length==0){
|
||
let res = await this.$http.index.rightMenu({
|
||
url:this.leftMenudata[this.classname].url
|
||
})
|
||
this.leftMenudata[this.classname].content.push(...res)
|
||
console.log("left",this.leftMenudata[this.classname].url)
|
||
}
|
||
},
|
||
getright(v,i){
|
||
console.log(v,i)
|
||
this.classname=i
|
||
this.getrightMenudata()
|
||
console.log("left",this.leftMenudata)
|
||
},
|
||
tosearch(){
|
||
uni.navigateTo({
|
||
url: '/pages/search/search'
|
||
})
|
||
},
|
||
torightMenuList(v){
|
||
uni.navigateTo({
|
||
url: '/pages/rightMenuList/rightMenuList?url='+v.id+'&title='+v.title
|
||
})
|
||
console.log(v)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
@import "../../common/less/page/classification.less";
|
||
</style>
|