uni-app商品分类导航 、双向绑定
第一种方法
<template>
<view class="row navBox" :style="scrollHeiht">
<!-- 左侧一级分类列表 -->
<scroll-view :scroll-top="scrollTopLeft" scroll-y class="leftNavBox col20-5 height-100">
<view class="leftNavItem py-20 text-center" v-for="(item,index) in leftNavData" :key="index">
<view @tap="leftTap(index)" :class="leftActiveIndex===index?'leftActive':''" class="leftNavContent py-10">
{
{
item.title}}
</view>
</view>
</scroll-view>
<!-- 右侧二级分类列表 -->
<scroll-view @scroll="rightScroll" :scroll-top="scrollTop" scroll-y class="rightNavBox col20-15 height-100" scroll-with-animation>
<view class="rightNavItem row justify-content-space-around align-items-center" v-for="(item,index) in rightNavData" :key="index">
<view class="font-bold text-center col-10">
商品分类{
{
index+1}}
</view>
<view class="rightNavContent display-flex align-items-center justify-content-center flex-direction-column" v-for="(item1,index1) in item" :key="index1">
<image :src="item1.url"></image>
{
{
item1.title}}
</view>
</view>
</scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
leftActiveIndex: 0,
leftNavData: [], /* 一级导航栏的所有数据 */
rightNavData: [], /* 二级导航栏的所有数据 */
scrollTop:0,
scrollHeiht:"", /* 可视区域的高度 */
leftScrollTop:[], /*左侧每一个分类项距离顶部的高度*/
rightScrollTop:[], /*右侧每一个分类项距离顶部的高度*/
leftNavItemHeight:0, /*左侧一个分类项的高度*/
scrollTopLeft:0
}
},
onLoad() {
/* 获取屏幕可视区域的高度 */
let height=uni.getSystemInfoSync().windowHeight
this.scrollHeiht=`height:${
height}px`
/* 获取模拟数据 */
for (var i = 0; i < 20; i++) {
/* 左边数据 */
let data = {
title: `分类${
i+1}`
};
this.leftNavData.push(data);
/* 右边数据 | 二位数组 */
this.rightNavData.push ([
{
url: "../../static/images/cate/cate_01.png",
title: `分类${
i+1}:商品`
},
{
url: "../../static/images/cate/cate_02.png",
title: `分类${
i+1}:商品`
},
{
url: "../../static/images/cate/cate_03.png",
title: `分类${
i+1}:商品`
},
{
url: "../../static/images/cate/cate_04.png",
title: `分类${
i+1}