這篇文章給大家分享的是有關(guān)微信小程序怎么實現(xiàn)側(cè)邊欄分類的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

網(wǎng)站建設(shè)哪家好，找成都創(chuàng)新互聯(lián)公司！專注于網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、小程序制作、集團企業(yè)網(wǎng)站建設(shè)等服務(wù)項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了雙牌免費建站歡迎大家使用！

本文實例為大家分享了微信小程序側(cè)邊欄分類展示的具體代碼，供大家參考，具體內(nèi)容如下

效果圖

實現(xiàn)思路

把屏幕當(dāng)成一個固定的盒子，然后把盒子分成兩邊，并讓盒子的每一邊都能夠滾動。

源碼

index.wxml

 
 
  
   
   
   
   
   {{item.name}}
  
 

 
 
  
   
    
     {{item.name}}
    
   
  
 

index.wxss

page {
 background: #f5f5f5;
}

/*總體主盒子*/

.container {
 display: flex;
 direction: row;
}

/*左側(cè)欄主盒子*/

.nav_left {
 /*設(shè)置行內(nèi)塊級元素（沒使用定位）*/
 position: absolute;
 display: inline-block;
 width: 35%;
 height: 100%;
 /*主盒子設(shè)置背景色為灰色*/
 background: #f5f5f5;
 text-align: center;
 overflow: scroll;
}

/*左側(cè)欄list的item*/

.nav_left .nav_left_items {
 /*每個高30px*/
 height: 30px;
 /*垂直居中*/
 line-height: 30px;
 /*再設(shè)上下padding增加高度，總高42px*/
 padding: 6px 0;
 /*只設(shè)下邊線*/
 border-bottom: 1px solid #dedede;
 /*文字14px*/
 font-size: 20px;
}

/*左側(cè)欄list的item被選中時*/

.nav_left .nav_left_items.active {
 /*背景色變成白色*/
 background: #fff;
 color: red;
}

/*右側(cè)欄主盒子*/

.nav_right {
 /*右側(cè)盒子使用了絕對定位*/
 position: absolute;
 top: 0;
 right: 0;
 flex: 1;
 /*寬度75%，高度占滿，并使用百分比布局*/
 width: 65%;
 height: 100%;
 padding: 10px;
 box-sizing: border-box;
 background: #fff;
 overflow: scroll;
}

.nav_right .nav_right_items {
}

.nav_right .nav_right_items text {
 /*給text設(shè)成塊級元素*/
 display: block;
 margin-bottom: 25px;
 font-size: 20px;
 /*設(shè)置文字居中*/
 text-align: left;
 /*設(shè)置文字溢出部分為...*/
 overflow: hidden;
 white-space: nowrap;
 text-overflow: ellipsis;
}

index.js

Page({
 data: {
  curNav: 0,
  title:[
   {
    "id":0,
    "name":"技術(shù)"
   },
   {
    "id": 1,
    "name": "技術(shù)"
   },
   {
    "id": 1,
    "name": "技術(shù)"
   },
   {
    "id": 1,
    "name": "技術(shù)"
   },
   {
    "id": 1,
    "name": "技術(shù)"
   },
   {
    "id": 1,
    "name": "技術(shù)"
   },

   {
    "id": 1,
    "name": "技術(shù)"
   },
   {
    "id": 1,
    "name": "技術(shù)"
   },
   {
    "id": 1,
    "name": "技術(shù)"
   },
   {
    "id": 1,
    "name": "技術(shù)"
   },
   {
    "id": 1,
    "name": "技術(shù)"
   },
   {
    "id": 1,
    "name": "技術(shù)"
   },
   {
    "id": 1,
    "name": "技術(shù)"
   },
   {
    "id": 1,
    "name": "技術(shù)"
   }
  ],
  content:[
   {
    id:2,
    "name":"軟件工程師"
   },
   {
    id: 2,
    "name": "軟件工程師"
   },
   {
    id: 2,
    "name": "軟件工程師"
   },
   {
    id: 2,
    "name": "軟件工程師"
   },
   {
    id: 2,
    "name": "軟件工程師"
   },
   {
    id: 2,
    "name": "軟件工程師"
   },
   {
    id: 2,
    "name": "軟件工程師"
   },
   {
    id: 2,
    "name": "軟件工程師"
   },
   {
    id: 2,
    "name": "軟件工程師"
   },
   {
    id: 2,
    "name": "軟件工程師"
   },
   {
    id: 2,
    "name": "軟件工程師"
   },
   {
    id: 2,
    "name": "軟件工程師"
   }
  ]
 }
})

感謝各位的閱讀！關(guān)于“微信小程序怎么實現(xiàn)側(cè)邊欄分類”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！