怎么在微信小程序中實(shí)現(xiàn)一個(gè)側(cè)邊分類欄

怎么在微信小程序中實(shí)現(xiàn)一個(gè)側(cè)邊分類欄？很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

創(chuàng)新互聯(lián)建站是一家網(wǎng)站設(shè)計(jì)公司，集創(chuàng)意、互聯(lián)網(wǎng)應(yīng)用、軟件技術(shù)為一體的創(chuàng)意網(wǎng)站建設(shè)服務(wù)商，主營產(chǎn)品：響應(yīng)式網(wǎng)站設(shè)計(jì)、品牌網(wǎng)站建設(shè)、成都全網(wǎng)營銷。我們專注企業(yè)品牌在網(wǎng)站中的整體樹立，網(wǎng)絡(luò)互動(dòng)的體驗(yàn)，以及在手機(jī)等移動(dòng)端的優(yōu)質(zhì)呈現(xiàn)。網(wǎng)站設(shè)計(jì)制作、做網(wǎng)站、移動(dòng)互聯(lián)產(chǎn)品、網(wǎng)絡(luò)運(yùn)營、VI設(shè)計(jì)、云產(chǎn)品.運(yùn)維為核心業(yè)務(wù)。為用戶提供一站式解決方案，我們深知市場(chǎng)的競爭激烈，認(rèn)真對(duì)待每位客戶，為客戶提供賞析悅目的作品，網(wǎng)站的價(jià)值服務(wù)。

本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)側(cè)邊分類欄的具體代碼，供大家參考，具體內(nèi)容如下

wxml–

<!--主盒子-->
<view class="container">
 <!-- 左側(cè)欄 -->
 <view class='nav_left'>
 <view class="nav_left_items {{curNav == 1 ? 'active' : ''}}" 
 bindtap="switchRightTab" data-id="1">
 水果
 </view>
 <view class="nav_left_items {{curNav == 2 ? 'active' : ''}}" 
 bindtap="switchRightTab" data-id="2">
 干果
 </view>
 <view class="nav_left_items {{curNav == 3 ? 'active' : ''}}" 
 bindtap="switchRightTab" data-id="3">
 蔬菜
 </view>
 <view class="nav_left_items {{curNav == 4 ? 'active' : ''}}" 
 bindtap="switchRightTab" data-id="4">
 海鮮
 </view>
 </view>
 <!-- 右側(cè)欄 -->
 <view class="nav_right">
 <view wx:if="{{curNav==1}}">
 <view class="nav_right_items">
 <image src="../images/mihoutao.png"></image>
 <text>獼猴桃</text>
 </view>
 <view class="nav_right_items">
 <image src="../images/longyan.png"></image>
 <text>龍眼</text>
 </view>
 <view class="nav_right_items">
 <image src="../images/juzi.png"></image>
 <text>橘子</text>
 </view>
 <view class="nav_right_items">
 <image src="../images/huolongguo.png"></image>
 <text>火龍果</text>
 </view>
 <view class="nav_right_items">
 <image src="../images/caomei.png"></image>
 <text>草莓</text>
 </view>
 </view>
 <view wx:if="{{curNav==2}}">
 <view class="nav_right_items">
 <image src="../images/xiaweiyi.png"></image>
 <text>夏威夷果</text>
 </view>
 <view class="nav_right_items">
 <image src="../images/kaixin.png"></image>
 <text>開心果</text>
 </view>
 <view class="nav_right_items">
 <image src="../images/bigen.png"></image>
 <text>碧根果</text>
 </view>
 <view class="nav_right_items">
 <image src="../images/mangguo.png"></image>
 <text>芒果</text>
 </view>
 </view>
 <view wx:if="{{curNav==3}}">
 <view class="nav_right_items">
 <image src="../images/huaye.png"></image>
 <text>花椰菜</text>
 </view>
 <view class="nav_right_items">
 <image src="../images/shengcai.png"></image>
 <text>生菜</text>
 </view>
 <view class="nav_right_items">
 <image src="../images/fanqie.png"></image>
 <text>番茄</text>
 </view>
 </view>
 </view>
</view>

–js–

// pages/stock/stock_main.js
Page({

 /* 頁面的初始數(shù)據(jù) */
 data: {
 curNav:1
 },
 /* 把點(diǎn)擊到的某一項(xiàng) 設(shè)為當(dāng)前curNav */
 switchRightTab:function(e){
 let id = e.target.dataset.id;
 console.log(id);
 this.setData({
 curNav: id
 })
 }
})

–wxss–

/* 1. 設(shè)置整個(gè)頁面的背景顏色 */
page{ 
 background: #f5f5f5; 
 /* 避免左側(cè)Item不夠時(shí) 被白色覆蓋*/
} 
/* 2.主盒子 */ 
.container { 
 width: 100%; /* 寬度占屏幕的100% */
 height: 100%; /* 高度占屏幕的100% */
 background-color: #fff; /* 背景顏色 */
}
/* 3.左盒子*/ 
 /* 3.1. 左側(cè)欄主盒子總體設(shè)置 */ 
.nav_left{ 
 position:absolute; /* 使用絕對(duì)定位 */
 top:0px; /* 距離上邊距：0px */
 left:0px; /* 距離左邊距：0px */
 width: 25%; /* 每個(gè)item所占的寬度 */
 background: #f5f5f5; /* 主盒子設(shè)置背景色為灰色 */ 
 text-align: center; /* 文字居中顯示 */
}
/* 3.2. 左側(cè)欄的每個(gè)item */ 
.nav_left .nav_left_items{ 
 height: 40px; /* 每個(gè)item高40px*/ 
 padding: 6px 0; /* 上內(nèi)邊距和下內(nèi)邊距是 6px[增加高度] 右內(nèi)邊距和左內(nèi)邊距是 0px*/
 border-bottom: 1px solid #dedede; /* 設(shè)置下邊線 */ 
 font-size: 14px; /* 設(shè)置文字大?。?4px */ 
} 
/* 3.3. 左側(cè)欄list的item被選中時(shí)*/ 
.nav_left .nav_left_items.active{ 
 background: #fff; /* 背景色變成白色 */ 
 color: #3385ff; /* 字體編程藍(lán)色 */
 border-left: 3px solid #3385ff; /* 設(shè)置邊框的寬度以及顏色 */
}
/* 4.右盒子 */ 
/* 4.1. 右側(cè)欄主盒子總體設(shè)置 */ 
.nav_right{ 
 position: absolute; /* 使用絕對(duì)定位 */ 
 top: 0; /* 距離上邊距：0px */
 left: 80px; /* 距離左邊距：80px */
 width: 75%; /* 右側(cè)主盒子所占寬度 */
 height: 600px; /* 右側(cè)主盒子所占高度 */
 padding: 10px; /* 所有 4 個(gè)內(nèi)邊距都是 10px*/
 box-sizing: border-box; /* 為元素指定的任何內(nèi)邊距和邊框都將在已設(shè)定的寬度和高度內(nèi)進(jìn)行繪制*/
 background: #fff; /* 右側(cè)主盒子背景顏色 */
}
/* 4.2. 右側(cè)欄中的每個(gè)item */ 
.nav_right .nav_right_items{ 
 float: left; /* 浮動(dòng)向左 */ 
 width: 33.33%; /* 每個(gè)item設(shè)置寬度是33.33% */ 
 height: 120px; /* 每個(gè)item設(shè)置高度是120px */ 
 text-align: center; /* 設(shè)置圖片下方的提示文字居中顯示 */
} 
/* 4.3. 右側(cè)欄中的每個(gè)item的圖樣式設(shè)置 */ 
.nav_right .nav_right_items image{ 
 width: 60px; /* 給圖片設(shè)置寬度 */ 
 height: 60px; /* 給圖片設(shè)置高度 */ 
 margin-top: 15px; /* 圖片距離上邊距15px */ 
 border-radius: 40%; /* 給圖片添加圓角邊框 */
}

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對(duì)創(chuàng)新互聯(lián)的支持。

當(dāng)前標(biāo)題：怎么在微信小程序中實(shí)現(xiàn)一個(gè)側(cè)邊分類欄
URL鏈接：http://bm7419.com/article36/iiphpg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供搜索引擎優(yōu)化、移動(dòng)網(wǎng)站建設(shè)、微信小程序、外貿(mào)網(wǎng)站建設(shè)、App開發(fā)、定制網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容