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

微信小程序?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">
? ? ? ? ? ? ? 專(zhuān)家A
? ? ? ? ? ? </swiper-item>
? ? ? ? ? ? <swiper-item id='1' catchtouchmove="stopTouchMove">
? ? ? ? ? ? ? 專(zhuān)家B
? ? ? ? ? ? </swiper-item>
? ? ? ? ? ? <swiper-item id='2' catchtouchmove="stopTouchMove">
? ? ? ? ? ? ? 專(zhuān)家C
? ? ? ? ? ? </swiper-item>
? ? ? ? ? ? <swiper-item id='3' catchtouchmove="stopTouchMove">
? ? ? ? ? ? ? 專(zhuān)家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)文章

最新評(píng)論