mpvue小程序中防商品联动分类下滑列表
作者：互联网
要在mpvue中实现如下的分类的页面：
代码如下(微信原生小程序的语法已改成mpvue的，图片设计的静态资源图片，你们自己去找需要的，这个只是参考）：
pages/toolbar/fenlei/index.vue
<template>
<view class="container">
<scroll-view class='nav_left' scroll-y='true'>
<block v-for="(item,index) in cateItems" :key="index">
<!-- <view :class="{nav_left_items curNav==item.cate_id?'active':''}" @click="switchRightTab" :data-index='index' :data-id="item.cate_id">{{item.cate_name}}</view> -->
<view class="nav_left_items" :class="curNav==item.cate_id ? 'active':''" @click="switchRightTab" :data-index='index' :data-id="item.cate_id">{{item.cate_name}}</view>
</block>
</scroll-view>
<scroll-view class="nav_right" scroll-y="true">
<view v-if="cateItems[curIndex].children.length>0">
<block v-for="(item,index) in cateItems[curIndex].children" :key="index">
<view class="nav_right_items">
<navigator url="#">
<image :src="item.image"></image>
<text>{{item.name}}</text>
</navigator>
</view>
</block>
</view>
<view class="nocate" wx:else>
<image src="../../../static/tabrIcon/nav-appmgt-active.png"></image>
<text>该分类暂无数据</text>
</view>
</scroll-view>
</view>
</template>
<script>
// import nodata from '../../../components/owner/nodata.vue';
// import divider from '../../../components/owner/divider.vue';
// import echarts from '../../../components/echarts/echarts.simple.min.js';
// import mpvueEcharts from 'mpvue-echarts';
export default {
components: {
// nodata,
// divider,
// mpvueEcharts
},
data() {
return {
cateItems:[
{
cate_id:1,
cate_name:'洗护',
children: [
{
child_id: 1,
name: '洁面皂',
image: "../../../static/images/lefttwo.png"
},
{
child_id: 2,
name: '卸妆',
image: "../../../static/images/icon4.png"
},
{
child_id: 3,
name: '洗发水',
image: "../../../static/images/icon4.png"
},
{
child_id: 4,
name: '保湿水',
image: "../../../static/images/icon4.png"
},
{
child_id: 5,
name: '粉底液',
image: "../../../static/images/icon4.png"
},{
child_id: 6,
name: '小蓝瓶',
image: "../../../static/images/icon4.png"
},
{
child_id: 7,
name: '卸妆',
image: "../../../static/images/icon4.png"
},
{
child_id: 8,
name: '洁面皂',
image: "../../../static/images/biandianzhan.png"
},
{
child_id: 9,
name: '香皂',
image: "../../../static/images/biandianzhan.png"
},
{
child_id: 10,
name: '肥皂',
image: "../../../static/images/biandianzhan.png"
},
{
child_id: 11,
name: '洗洁精',
image: "../../../static/images/biandianzhan.png"
},
{
child_id: 12,
name: '洁面皂',
image: "../../../static/images/biandianzhan.png"
},
{
child_id: 13,
name: '香皂',
image: "../../../static/images/biandianzhan.png"
},
{
child_id: 14,
name: '肥皂',
image: "../../../static/images/biandianzhan.png"
},
{
child_id: 15,
name: '洗洁精',
image: "../../../static/images/biandianzhan.png"
},
{
child_id: 16,
name: '洁面皂',
image: "../../../static/images/biandianzhan.png"
},
{
child_id: 17,
name: '香皂',
image: "../../../static/images/biandianzhan.png"
},
{
child_id: 18,
name: '肥皂',
image: "../../../static/images/biandianzhan.png"
},
{
child_id: 19,
name: '洗洁精',
image: "../../../static/images/biandianzhan.png"
}
]
},
{
cate_id:2,
cate_name:'生鲜'
},
{
cate_id:3,
cate_name:'食品'
},
{
cate_id: 4,
cate_name: '女装'
},
{
cate_id: 5,
cate_name: '百货'
},
{
cate_id: 6,
cate_name: '母婴'
},
{
cate_id: 7,
cate_name: '手机'
},
{
cate_id: 8,
cate_name: '鞋靴'
},
{
cate_id: 9,
cate_name: '运动'
},
{
cate_id: 10,
cate_name: '美家'
},
{
cate_id: 11,
cate_name: '男装'
},
{
cate_id: 12,
cate_name: '水果'
},
{
cate_id: 13,
cate_name: '电子',
children: [
{
child_id: 1,
name: '洁面皂',
image: "../../../static/images/biandianzhan.png"
},
]
}
],
curNav:1,
curIndex:0
};
},
methods: {
switchRightTab(e){
let id = e.target.dataset.id,index=e.target.dataset.index;
this.curNav = id;
this.curIndex = index;
},
}
};
</script>
<style src="../../../global/global.css"></style>
<style src="../fenlei/fenlei.css"></style>
pages/toolbar/fenlei/fenlei.css:
.container{
position:fixed;
width:100%;
height:100%;
background-color:#FFF;
}
.nav_left{
width:25%;
height:100%;
background:#F2F2F2;
text-align:center;
position:absolute;
top:0;
left:0;
}
.nav_left .nav_left_items{
height:100rpx;
line-height:100rpx;
font-size:28rpx;
}
.nav_left .nav_left_items.active{
position:relative;
background:#FFF;
color:#FF5000;
}
.nav_left .nav_left_items.active::before{
display: inline-block;
width:6rpx;
height:60rpx;
background:#FE5723;
content:'';
position:absolute;
top:20rpx;
left:0;
}
.nav_right{
position:absolute;
top:0;
right:0;
width:75%;
height:100%;
}
.nav_right .nav_right_items{
float: left;
width: 33.33%;
text-align: center;
padding:30rpx 0;
}
.nav_right .nav_right_items image{
width: 120rpx;
height: 120rpx;
}
.nav_right .nav_right_items text{
display: block;
margin-top: 20rpx;
font-size: 28rpx;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.nocate{
padding:100rpx;
text-align: center;
}
.nocate image{
width:70rpx;
height:70rpx;
}
.nocate text{
font-size:28rpx;
display:block;
color:#BBB;
}
/*隐藏滚动条*/
::-webkit-scrollbar{
width: 0;
height: 0;
color: transparent;
}
说明：
也许你们看的是另外一篇，我是参考那偏原生的语法，改成mpvue需要的语法，基本就是vue的语法： 如果：wx:for 改成 v-for 、wx:if 改成 v-if、this.setData({ curNav:id, curIndex:index })改成 this.curNav = id;this.curIndex = index
参考：
标签：mpvue,name,..,image,列表,中防,images,id,cate 来源： https://blog.csdn.net/XU441520/article/details/115374689