微信小程序仿京东分类 scoll-view组建实现

先看看效果

.wxml :

                                                          {{itemName[0].name}}                                                                        {{itemName[0].name}}                                                                                            {{item.desc}}                                                     

.js:

var list = require('../../utils/list.js')const app = getApp();Page({  data: {    // 左侧点击类样式    curNav: 'A1',  },  onReady: function () {    // 生命周期函数--监听页面初次渲染完成    var listChild1 = list.List[0];    console.log(listChild1)    var that = this;    // 获取可视区高度    wx.getSystemInfo({      success: function (res) {        that.setData({          list: listChild1,          winHeight: res.windowHeight,        })      }    })  },  //点击左侧 tab ，右侧列表相应位置联动 置顶  switchRightTab: function (e) {    var id = e.target.id;    console.log(id)    this.setData({      // 动态把获取到的 id 传给 scrollTopId      scrollTopId: id,      // 左侧点击类样式      curNav: id,    })  }})

.css:

.container {  position: relative;   width: 100%;   height: 1220rpx;   background-color:white;   color: #939393; }  /*左侧栏主盒子*/ .nav_left{   /*设置行内块级元素（没使用定位）*/   display: inline-block;   width: 100%;   height: 100%;   /*主盒子设置背景色为灰色*/   background: #fff;   text-align: center;   /* position: fixed;  */  left: 0;  top: 0;  /* border-top: 1rpx solid #dedede; 上侧线条*/} .isSelect{  height: 50%;  width: 2%;  background: red; }.item-name{  width: 98%;  display: flex;  justify-content: center;  align-items: center;  background: #f0f4f7;}.item-name-select{  width: 98%;    background: #fff;    font-weight: bold;  color: #ed1000;}/*左侧栏list的item*/ .nav_left .nav_left_items{   background: #fff;  /*每个高30px*/   height: 100rpx;   /*垂直居中*/   line-height: 100rpx;   /*再设上下padding增加高度，总高42px*/   /* padding: 15rpx 0;  */  /*只设下边线*/   /* border-bottom: 1px solid #dedede;  */  display: flex;  flex-direction: row;  /*文字14px*/    align-items: center;  font-size: 26rpx;  color: #8b8888;   /* font-weight:  */} /*左侧栏list的item被选中时*/ .nav_left .nav_left_items.active{   /*背景色变成白色*/   /* background: #f0f4f7; */  color: #ed1000;  /* border-left: 3px  solid  #ed1000;  */ }  /*右侧栏主盒子*/ .scroll_right{   /*右侧盒子使用了绝对定位*/   position: fixed;  top: 0;   right: 0;  overflow: auto;  flex: 1;   /*宽度75%，高度占满，并使用百分比布局*/   width: 75%;   height: 100%;   padding: 0 20rpx 20rpx 20rpx;   box-sizing: border-box; }/* 隐藏滚动条 */::-webkit-scrollbar {  width: 0;  height: 0;  color: transparent;}.mink::after{  display:block;content:'';clear:both; }/* .jiul,.jiul image{  width: 100%;  height: 300rpx; } */.minl{  font-weight: bold;  font-size: 29rpx;  color: rgb(17, 16, 16);  text-align: left;  line-height: 60rpx;  float: left;  display: flex;  justify-content: center;  align-items: center;   /* background: #f0f4f7;  */  width: 100%;  height: 50rpx;}.mink{  width: 100%;  background: #fff;  height: 100%;  /* border: 1rpx solid #dedede; */}/*右侧栏list的item*/ .nav_right_items{   /*浮动向左*/   float: left;   /*每个item设置宽度是33.33%*/   width: 50%;  /* height: 160rpx;  */  text-align: center;  color: #ed1000;} .nav_right_items image{   /*被图片设置宽高*/   width: 60px;   height: 50px;  margin-top: 15rpx;} .nav_right_items text{   /*给text设成块级元素*/   display: block;   margin-top: 5rpx;   margin-bottom: 10rpx;  font-size: 26rpx;   /*设置文字溢出部分为...*/   overflow: hidden;   white-space: nowrap;   text-overflow: ellipsis; }/** 自定义其他点击态样式类 **/.other-navigator-hover{  background:#dedede;}.scroll_left{  width:25%;  height:100%;  background:#fff;  text-align:center;  position: fixed;  left: 0;top: 0}.header-img{  height: 100px;  width: 100%;border-radius: 10rpx;}.header-img image{  width: 100%;  height: 100%;  border-radius: 10rpx; }.view-items{  width: 100%;  height: 100%;  display: flex;  flex-wrap: wrap;  margin-bottom: 70rpx;}.view-items-item{  width:50%;  height: 100%;  display: flex;  flex-direction: column;  margin-top: 15rpx;}.view-items-item-view1{display: flex;justify-content: center;align-items: center;margin-bottom: 8rpx;}.view-items-item-view2{  display: flex;justify-content: center;align-items: center;}.view-items-item-view1 image{   width: 60px;   height: 60px;  margin-top: 15rpx;}.view-items-item-view2 text{  font-size: 26rpx;   }