微信小程序?qū)崿F(xiàn)左側(cè)導(dǎo)航欄
更新時(shí)間：2022年07月17日 11:48:12 作者：逸Ⅱ彡
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)左側(cè)導(dǎo)航欄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)左側(cè)導(dǎo)航欄的具體代碼，供大家參考，具體內(nèi)容如下
wxml
<view class="content">
? ? ? <view class='left'>
? ? ? ? <view class="{{flag==0?'select':'normal'}}" id='0' bindtap='switchNav'>8：00-9：00</view>
? ? ? ? <view class="{{flag==1?'select':'normal'}}" id='1' bindtap='switchNav'>9：00-10：00</view>
? ? ? ? <view class="{{flag==2?'select':'normal'}}" id='2' bindtap='switchNav'>14：00-15：00</view>
? ? ? ? <view class="{{flag==3?'select':'normal'}}" id='3' bindtap='switchNav'>15：00-16：00</view>
? ? ? </view>
? ? ? <view class='right'>
? ? ? ? <view class='category'>
? ? ? ? ? <swiper current='{{currentTab}}' style='height:500px' vertical="{{true}}">
? ? ? ? ? ? <swiper-item id='0' catchtouchmove="stopTouchMove">
? ? ? ? ? ? ? 專家A
? ? ? ? ? ? </swiper-item>
? ? ? ? ? ? <swiper-item id='1' catchtouchmove="stopTouchMove">
? ? ? ? ? ? ? 專家B
? ? ? ? ? ? </swiper-item>
? ? ? ? ? ? <swiper-item id='2' catchtouchmove="stopTouchMove">
? ? ? ? ? ? ? 專家C
? ? ? ? ? ? </swiper-item>
? ? ? ? ? ? <swiper-item id='3' catchtouchmove="stopTouchMove">
? ? ? ? ? ? ? 專家D
? ? ? ? ? ? </swiper-item>
? ? ? ? ? </swiper>
? ? ? ? </view>
? ? ? </view>
</view>wxss
.content {
? display: flex;
? flex-direction: row;
? font-family: "Microsoft YaHei"
}
.left {
? width: 30%;
? font-size: 10px;
? height: 500px;
? background-color: #F4F4F4;
}
.left view {
? text-align: center;
? height: 45px;
? line-height: 45px;
}
.select {
? background-color: #ffffff;
? border-left: 2px solid #36AE66;
? font-weight: bold;
? color: #36AE66;
}
.normal {
? background-color: #F4F4F4;
? border-bottom: 1px solid #f2f2f2;
}
.right {
? width: 70%;
? margin: 0px;
}js
Page({
? data: {
? ? flag: 0,
? ? currentTab: 0
? },
? switchNav: function(e) {
? ? var page = this;
? ? var id = e.target.id;
? ? if (this.data.currentTab == id) {
? ? ? return false;
? ? } else {
? ? ? page.setData({
? ? ? ? currentTab: id
? ? ? });
? ? }
? ? page.setData({
? ? ? flag: id
? ? });
? },
? catchTouchMove: function (res) {
? ? return false
? }
})實(shí)現(xiàn)效果
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript對(duì)象訪問(wèn)器的工作原理及使用方法
今天來(lái)聊一下JavaScript中的對(duì)象訪問(wèn)器,JavaScript的主要功能之一是能夠定義對(duì)象,這些對(duì)象可以封裝屬性和方法,本文將深入探討 JavaScript 對(duì)象訪問(wèn)器是什么、它是如何工作的以及使用對(duì)象訪問(wèn)器的作用,需要的朋友可以參考下2024-06-06
javascript 實(shí)現(xiàn)自由落體的方塊效果
這其實(shí)是一個(gè)很簡(jiǎn)單的實(shí)現(xiàn)，create一個(gè)新的div元素，然后append到文檔的body上，經(jīng)過(guò)一定時(shí)間的延遲，做自由落體運(yùn)動(dòng)，著地后fade消失。 不多說(shuō)，直接上代碼。2010-01-01
JS canvas實(shí)現(xiàn)畫(huà)板和簽字板功能
這篇文章主要為大家詳細(xì)介紹了JS canvas實(shí)現(xiàn)畫(huà)板和簽字板功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-02-02
javascript實(shí)現(xiàn)日期三級(jí)聯(lián)動(dòng)下拉框選擇菜單
這篇文章主要介紹了javascript實(shí)現(xiàn)日期三級(jí)聯(lián)動(dòng)下拉框選擇菜單，實(shí)現(xiàn)JS年月日三級(jí)聯(lián)動(dòng)下拉框選擇功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04
js 針對(duì)html DOM元素操作等經(jīng)驗(yàn)累積
這篇文章主要介紹了js 針對(duì)html DOM元素操作等經(jīng)驗(yàn)累積,需要的朋友可以參考下2014-03-03
本文主要介紹了Javascript變量函數(shù)聲明提升深刻理解，Javascript變量函數(shù)聲明提升Hoisting是在Javascript中執(zhí)行上下文工作方式的一種認(rèn)識(shí)，更多相關(guān)知識(shí)需要的小伙伴可以參考下面文章詳細(xì)內(nèi)容2022-06-06
typescript在node.js下使用別名(paths)無(wú)效的問(wèn)題詳解
這篇文章主要給大家介紹了關(guān)于typescript在node.js下使用別名(paths)無(wú)效問(wèn)題的相關(guān)資料,文中通過(guò)圖文以及示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-07-07
這篇文章主要介紹了Bootstrap3學(xué)習(xí)筆記(二)之排版的相關(guān)資料,非常具有參考價(jià)值，特此分享腳本之家平臺(tái)，供大家參考2016-05-05
這篇文章主要介紹了canvas軌跡回放功能實(shí)現(xiàn)過(guò)程以及相關(guān)的代碼整理，跟著小編一起學(xué)習(xí)下吧。2017-12-12
微信小程序?qū)崿F(xiàn)tab頁(yè)面切換功能
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)tab頁(yè)面切換功能,代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-07-07