小程序?qū)崿F(xiàn)側(cè)邊欄切換
本文實(shí)例為大家分享了小程序?qū)崿F(xiàn)側(cè)邊欄切換的具體代碼,供大家參考,具體內(nèi)容如下
效果圖如下:
實(shí)現(xiàn)步驟:
sort.wxml
<!--主盒子--> <view class="con"> ?<!--左側(cè)欄--> ?<view class="nav_left"> ? ?<block wx:for="{{cateItems}}" wx:key="*this"> ? ? ?<!--當(dāng)前項(xiàng)的id等于item項(xiàng)的id,那個(gè)就是當(dāng)前狀態(tài)--> ? ? ?<!--用data-index記錄這個(gè)數(shù)據(jù)在數(shù)組的下標(biāo)位置,使用data-id設(shè)置每個(gè)item的id值,供打開2級(jí)頁面使用--> ? ? ?<view class="nav_left_items {{curNav == item.cate_id ? 'active' : ''}}" bindtap="switchRightTab" data-index="{{index}}" data-id="{{item.cate_id}}">{{item.cate_name}}</view> ? ?</block> ?</view> ?<!--右側(cè)欄--> ?<view class="nav_right"> ? ?<!--如果有數(shù)據(jù),才遍歷項(xiàng)--> ? ?<view wx:if="{{cateItems[curIndex].ishaveChild}}"> ? ? ?<block wx:for="{{cateItems[curIndex].children}}" wx:key="value"> ? ? ? ?<view class="nav_right_items"> ? ? ? ?<!--界面跳轉(zhuǎn) --> ? ? ? ? ?<navigator url="../../detail/detail"> ? ? ? ? ? ?<image src="{{item.image}}"></image> ? ? ? ? ? ?<text>{{item.name}}</text> ? ? ? ? ?</navigator> ? ? ? ?</view> ? ? ?</block> ? ?</view> ? ?<!--如果無數(shù)據(jù),則顯示數(shù)據(jù)--> ? ?<view class="nodata_text" wx:else>該分類暫無數(shù)據(jù)</view> ?</view> </view>
sort.wxss
page{ ? ? background: #f5f5f5; ? } ? /*總體主盒子*/ ? .con { ? ? position: relative; ? ? width: 100%; ? ? height: 100%; ? ? background-color: #fff; ? ? color: #939393; ? } ?/*左側(cè)欄主盒子*/ ? .nav_left{ ? ? /*設(shè)置行內(nèi)塊級(jí)元素(沒使用定位)*/ ? ? display: inline-block; ? ? width: 25%; ? ? height: 100%; ? ? /*主盒子設(shè)置背景色為灰色*/ ? ? background: #f5f5f5; ? ? text-align: center; ? } ? /*左側(cè)欄list的item*/ ? .nav_left .nav_left_items{ ? ? /*每個(gè)高30px*/ ? ? height: 40px; ? ? /*垂直居中*/ ? ? line-height: 40px; ? ? /*再設(shè)上下padding增加高度,總高42px*/ ? ? padding: 6px 0; ? ? /*只設(shè)下邊線*/ ? ? border-bottom: 1px solid #dedede; ? ? /*文字14px*/ ? ? font-size: 14px;? } ? /*左側(cè)欄list的item被選中時(shí)*/ ? .nav_left .nav_left_items.active{ ? ? /*背景色變成白色*/ ? ? background: #fff; ? ? color: #f0145a;? } ? /*右側(cè)欄主盒子*/ ? .nav_right{ ? ? /*右側(cè)盒子使用了絕對(duì)定位*/ ? ? position: absolute; ? ? top: 0; ? ? right: 0; ? ? flex: 1; ? ? /*寬度75%,高度占滿,并使用百分比布局*/ ? ? width: 75%; ? ? height: 1000px; ? ? padding: 10px; ? ? box-sizing: border-box; ? ? background: #fff; ? } ? /*右側(cè)欄list的item*/ ? .nav_right .nav_right_items{ ? ? /*浮動(dòng)向左*/ ? ? float: left; ? ? /*每個(gè)item設(shè)置寬度是33.33%*/ ? ? width: 33.33%; ? ? height: 94px; ? ? text-align: center; ? } ? .nav_right .nav_right_items image{ ? ? /*被圖片設(shè)置寬高*/ ? ? width: 60px; ? ? height: 50px; ?? } ? .nav_right .nav_right_items text{ ? ? /*給text設(shè)成塊級(jí)元素*/ ? ? display: block; ?? ? font-size: 14px; ? ? color: black; ? /*設(shè)置文字溢出部分為...*/ ? ? overflow: hidden; ? ? white-space: nowrap; ? ? text-overflow: ellipsis; ? }? .nodata_text { ? color:#000; ? font-size: 14px; ? ? text-align: center; ? }?
sort.js
Page({ ? data: { ? ? cateItems: [ ? ? ? { ? ? ? ? cate_id: 1, ? ? ? ? cate_name: "列表一", ? ? ? ? ishaveChild: true, ? ? ? ? children: ? ? ? ? ? [ ? ? ? ? ? ? { ? ? ? ? ? ? ? child_id: 1, ? ? ? ? ? ? ? name: 'ssd', ? ? ? ? ? ? ? image: "../../images/1.jpg" ? ? ? ? ? ? }, ? ? ? ? ? ? { ? ? ? ? ? ? ? child_id: 2, ? ? ? ? ? ? ? name: 'fff', ? ? ? ? ? ? ? image: "../../images/2.jpg" ? ? ? ? ? ? }, ? ? ? ? ? ? { ? ? ? ? ? ? ? child_id: 3, ? ? ? ? ? ? ? name: 'ghf', ? ? ? ? ? ? ? image: "../../images/3.jpg" ? ? ? ? ? ? }, ? ? ? ? ? ? { ? ? ? ? ? ? ? child_id: 4, ? ? ? ? ? ? ? name: 'gergr', ? ? ? ? ? ? ? image: "../../images/4.jpg" ? ? ? ? ? ? } ? ? ? ? ? ] ? ? ? }, ? ? ? { ? ? ? ? cate_id: 2, ? ? ? ? cate_name: "列表二", ? ? ? ? ishaveChild: true, ? ? ? ? children: ? ? ? ? ? [ ? ? ? ? ? ? { ? ? ? ? ? ? ? child_id: 1, ? ? ? ? ? ? ? name: 'eryt', ? ? ? ? ? ? ? image: "../../images/2.jpg" ? ? ? ? ? ? }, ? ? ? ? ? ? { ? ? ? ? ? ? ? child_id: 2, ? ? ? ? ? ? ? name: '3dwag', ? ? ? ? ? ? ? image: "../../images/3.jpg" ? ? ? ? ? ? }, ? ? ? ? ? ? { ? ? ? ? ? ? ? child_id: 3, ? ? ? ? ? ? ? name: 'hrtht', ? ? ? ? ? ? ? image: "../../images/2.jpg" ? ? ? ? ? ? }, ? ? ? ? ? ? { ? ? ? ? ? ? ? child_id: 4, ? ? ? ? ? ? ? name: 'ydtjy', ? ? ? ? ? ? ? image: "../../images/6.jpg" ? ? ? ? ? ? }, ? ? ? ? ? ? { ? ? ? ? ? ? ? child_id: 5, ? ? ? ? ? ? ? name: 'yjtdyt', ? ? ? ? ? ? ? image: "../../images/3.jpg" ? ? ? ? ? ? }, ? ? ? ? ? ? { ? ? ? ? ? ? ? child_id: 6, ? ? ? ? ? ? ? name: 'aerf', ? ? ? ? ? ? ? image: "../../images/4.jpg" ? ? ? ? ? ? }, ? ? ? ? ? ? { ? ? ? ? ? ? ? child_id: 7, ? ? ? ? ? ? ? name: 'gerg', ? ? ? ? ? ? ? image: "../../images/2.jpg" ? ? ? ? ? ? }, ? ? ? ? ? ? { ? ? ? ? ? ? ? child_id: 8, ? ? ? ? ? ? ? name: 'jytj', ? ? ? ? ? ? ? image: "../../images/1.jpg" ? ? ? ? ? ? } ? ? ? ? ? ] ? ? ? }, ? ? ? { ? ? ? ? cate_id: 3, ? ? ? ? cate_name: "列表三", ? ? ? ? ishaveChild: true, ? ? ? ? children: ? ? ? ? ? [ ? ? ? ? ? ? { ? ? ? ? ? ? ? child_id: 1, ? ? ? ? ? ? ? name: 'jtytyj', ? ? ? ? ? ? ? image: "../../images/3.jpg" ? ? ? ? ? ? }, ? ? ? ? ? ? { ? ? ? ? ? ? ? child_id: 2, ? ? ? ? ? ? ? name: 'tyjfyj', ? ? ? ? ? ? ? image: "../../images/6.jpg" ? ? ? ? ? ? }, ? ? ? ? ? ? { ? ? ? ? ? ? ? child_id: 3, ? ? ? ? ? ? ? name: 'tuyfuk', ? ? ? ? ? ? ? image: "../../images/4.jpg" ? ? ? ? ? ? }, ? ? ? ? ? ? { ? ? ? ? ? ? ? child_id: 4, ? ? ? ? ? ? ? name: 'seyu5trd', ? ? ? ? ? ? ? image: "../../images/3.jpg" ? ? ? ? ? ? } ? ? ? ? ? ] ? ? ? }, ? ? ? { ? ? ? ? cate_id: 4, ? ? ? ? cate_name: "列表四", ? ? ? ? ishaveChild: false, ? ? ? ? children: [] ? ? ? } ? ? ], ? ? curNav: 1, ? ? curIndex: 0 ? }, ? //事件處理函數(shù) ? ? switchRightTab: function (e) { ? ? console.log(e) ? ? // 獲取item項(xiàng)的id,和數(shù)組的下標(biāo)值 ? ? ? let id = e.target.dataset.id, ? ? index = parseInt(e.target.dataset.index); ? ? // 把點(diǎn)擊到的某一項(xiàng),設(shè)為當(dāng)前index ? ? ? this.setData({ ? ? ? curNav: id, ? ? ? curIndex: index ? ? }) ? } })
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript實(shí)現(xiàn)生成動(dòng)態(tài)表格和動(dòng)態(tài)效果的方法詳解
這篇文章主要介紹了如何通過JavaScript語言實(shí)現(xiàn)動(dòng)圖表格的生成以及動(dòng)態(tài)效果的實(shí)現(xiàn),文中的示例代碼講解詳細(xì),感興趣的可以了解一下2022-02-02javascript cookie操作類的實(shí)現(xiàn)代碼小結(jié)附使用方法
javascript cookie操作類的實(shí)現(xiàn)代碼小結(jié)附使用方法,對(duì)于cookies操作不是很熟悉的朋友可以參考下。2010-06-06

JavaScript數(shù)據(jù)結(jié)構(gòu)之雙向鏈表和雙向循環(huán)鏈表的實(shí)現(xiàn)

CocosCreator實(shí)現(xiàn)技能冷卻效果

詳解JavaScript 浮點(diǎn)數(shù)運(yùn)算的精度問題