欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

小程序?qū)崿F(xiàn)側(cè)邊欄切換

 更新時(shí)間:2022年07月13日 17:10:12   作者:今天星期八  
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)側(cè)邊欄切換效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

本文實(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ù)據(jù)結(jié)構(gòu)之雙向鏈表和雙向循環(huán)鏈表的實(shí)現(xiàn)

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

    本篇文章主要介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)之雙向鏈表和雙向循環(huán)鏈表的實(shí)現(xiàn),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-11-11
  • CocosCreator實(shí)現(xiàn)技能冷卻效果

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

    這篇文章主要介紹了CocosCreator實(shí)現(xiàn)技能冷卻效果,同學(xué)們可以跟著教程,親手試一下,代碼都是可以復(fù)用的
    2021-04-04
  • 詳解JavaScript 浮點(diǎn)數(shù)運(yùn)算的精度問題

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

    這篇文章主要介紹了詳解JavaScript 浮點(diǎn)數(shù)運(yùn)算的精度問題,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-07-07
  • 最新評(píng)論