微信小程序实现侧边栏分类

本文的例子分享了微信小程序侧边栏显示的具体代码，供大家参考。具体内容如下

翻译

实现理念

把屏幕想象成一个固定的盒子，然后把盒子分成两面，让盒子的每一面滚动。

源代码

index.wxml

！-主盒视图类='容器'！-左列-视图类=' nav _ left '块wx : for=' { { title } } ' wx : for-item=' item ' wx : key=' { { index } } '！- {{curNav==item.id？active' : ''}} -！-三眼运算符用于修改当前选定目录的样式-！switchrighttab函数用于呈现数据-！-当用户点击不同的侧边栏目录时，根据data-id从数据库中获取新数据，向左渲染，并修改curNav的值，这样就可以将新样式添加到被点击的目录中，js就可以自己实现了-view class=' nav _ left _ items { { curNav==item。“身份证？”active ' : ' ' } } ' bind tap=' SwitChrightTab ' data-id=' { { item . id } } ' { { item . name } }/view/block/view！-右列-视图类=' nav _ right '视图类=' nav _ right _ items ' block wx : for=' { { content } } ' wx : for-item=' item ' wx : key=' { { index } } '视图文本{ { item . name } }/text/view/block/view/view/view index . wxss

第{ background : # f5f 5；}/*整体主框*/。容器{ display: flex方向：行；}/*左栏主框*/。nav_left {/*在行中设置块级元素(不使用定位)*/position:绝对；display:内联块；宽度：35%；高度： 100%；/*主框背景色为灰色*/background : # f5f 5；文本对齐：中心；飞越：卷轴；}/* item */。nav _左侧。左列列表中的nav _ left _ items {/*每个项目的高度为30px */高度为： 30px/*垂直居中*/线高： 30px；/*设置上下填充增加高度，总高度42px */padd : 6px 0；/*仅设置下边缘*/border-bottom : 1 pxsolid # dede；/* text 14px */font-size : 20px；}/*当左栏列表中的项目被选中时，*/。nav _ left . nav _ left _ items . active {/*背景颜色变为白色*/background : # fff；颜色：红色；}/*右栏的主框*/。nav_right {/*右框使用绝对定位*/position : absolute；top : 0；right : 0；flex : 1；/*宽度为75%，高度为满，使用百分比布局*/width : 65%；高度： 100%；padding: 10px盒子尺寸：边框盒子；背景# fff飞越：卷轴；}.nav _右。nav _ right _ items {}。nav _右。nav _ right _ items text {/*将文本设置为块级元素*/display 3360 block；边距-bottom : 25px；font-size : 20px；/*设置文本中心*/text-align:左侧；/*将文本的溢出部分设置为.*/overflow:隐藏；white-space : nowrap；文本-overflow:省略号；}index.js

Page ({data: {curnav: 0，title : [{'id' 33600，' name' :' technology' }，{'id' :' technology' }，{'id' :) {'id': 1，' name ' 3: ' technology ' }，{ ' id ' : ' technology ' }，{ ' id ' 3333660 '{'id': 1，' name':' technology'}，{'id' :' technology' }，{'id': 1，' name':' technology'}，{'id': '。{'id': 1，' name':' technology'}，{'id' :' technology' }，{'id': 1，' name':' technology'}]，内容： Name':' Software Engineer' }，{id: 2，' Name ' : ' Software Engineer ' }，{id: '

关于vue.js组件的教程，请点击专题vue.js组件学习教程学习。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。