Реализация эффекта tabs в js в разработке微信

Недавно微信小程序非常火爆， полон популярности, но также можно заметить, что при поиске по ключевым словам,出现的各种网站都是微信 официальные документации. Накануне этой волны, в эти дни я сначала просмотрел все технические документации по小程序ам, и затем начал писать примеры. Многие компоненты уже封装ованы внутри微信, и я обнаружил, что нет эффекта вкладки tab. В эти дни я изучил это. Мой подход такой:　

1. При первом клике по навигации нужны две переменные: одна для хранения текущего стиля класса, и одна для других навигационных стилей по умолчанию

2. Список содержимого вкладки также требует двух переменных: одной для хранения текущего отображаемого блока, и одной для других скрытых блоков по умолчанию

3. Используйте三元 оператор для получения индекса навигации через клик, и определите, нужно ли добавить текущий класс [Примечание, я привязал событие клика к родительскому навигационному меню, и получил объект события, который инициировал клик, через свойство target]

Соедините с следующим рисунком:

Сразу же посмотрите исходный код:

demo.wxml：

<view class="tab"> 
 <view class="tab-left" bindtap="tabFun"> 
 <view class="{{tabArr.curHdIndex=='0'? 'active' : ''}}" id="tab-hd01" data-id="0">tab-hd01</view> 
 <view class="{{tabArr.curHdIndex=='1'? 'active' : ''}}" id="tab-hd02" data-id="1">tab-hd01</view> 
 <view class="{{tabArr.curHdIndex=='2'? 'active' : ''}}" id="tab-hd03" data-id="2">tab-hd01</view> 
 <view class="{{tabArr.curHdIndex=='3'? 'active' : ''}}" id="tab-hd04" data-id="3">tab-hd01</view> 
 </view> 
 <view class="tab-right"> 
 <view class="right-item {{tabArr.curBdIndex=='0'? 'active' : ''}}">tab-bd01</view> 
 <view class="right-item {{tabArr.curBdIndex=='1'? 'active' : ''}}">tab-bd02</view> 
 <view class="right-item {{tabArr.curBdIndex=='2'? 'active' : ''}}">tab-bd03</view> 
 <view class="right-item {{tabArr.curBdIndex=='3'? 'active' : ''}}">tab-bd04</view> 
 </view> 
</view> 

demo.js：

Page( { 
 data: { 
 tabArr: { 
 curHdIndex: 0, 
 curBdIndex: 0 
 }, 
 }, 
 tabFun: function(e){ 
 //获取触发事件组件的dataset属性 
 var _datasetId=e.target.dataset.id; 
 console.log("----"+_datasetId+"----"); 
 var _obj={}; 
 _obj.curHdIndex=_datasetId; 
 _obj.curBdIndex=_datasetId; 
 this.setData({ 
 tabArr: _obj 
 }); 
 }, 
 onLoad: function( options ) { 
 alert( "------" ); 
 } 
}); 

demo.wxss：

.tab{ 
 display: flex; 
 flex-direction: row; 
} 
.tab-left{ 
 width: 200rpx; 
 line-height: 160%; 
 border-right: solid 1px gray; 
} 
.tab-left view{ 
 border-bottom: solid 1px red; 
} 
.tab-left .active{ 
 color: #f00; 
} 
.tab-right{ 
 line-height: 160%; 
} 
.tab-right .right-item{ 
 padding-left: 15rpx; 
 display: none; 
} 
.tab-right .right-item.active{ 
 display: block; 
} 

Финальный результат демонстрации будет следующим:

Это только моя идея, если у вас есть лучшая идея, пожалуйста, предложите ~

Эта статья была включена в "Сборник приемов разработки微信 с использованием JavaScript", всех приглашаю к изучению и чтению.

Рекомендуем одну из самых популярных目前在 Интернете статей о разработке微信小程序: "Руководство по разработке微信小程序" от редактора, тщательно собранное, надеюсь, вам понравится.

Вот и все, что было в этой статье, надеюсь, это поможет вам в изучении, также希望大家多多支持呐喊教程。

Объявление: содержимое статьи взято из Интернета, авторские права принадлежат соответствующему автору, контент предоставлен пользователями Интернета, сайт не обладает правами собственности, не был отредактирован вручную, не несет ответственности за связанные с этим юридические последствия. Если вы обнаружите спорное содержимое, пожалуйста, отправьте письмо по адресу: notice#oldtoolbag.com (при отправке письма замените # на @) для жалоб,并提供 соответствующие доказательства. При обнаружении фактов, сайт незамедлительно удалят спорное содержимое.