Cet article vous expliquera comment personnaliser le composant de la barre d'onglets dans la page du mini programme et réaliser le changement d'onglet inférieur.
Demande récente, le brouillon de conception est tel qu'indiqué sur l'image
Pour implémenter une barre de navigation inférieure spéciale, utilisez le composant de barre d'onglets personnalisé officiel, ajoutez la page d'onglet inférieure et changez l'écran de démarrage de l'image. [Recommandations d'apprentissage associées : Tutoriel de développement de mini-programmes]
Solution utilisant un carrousel swiper + un composant personnalisé
<view class="jtab-bar"> <view class="jtab-bar-item" wx:for="{{list}}" wx:key="index" data-index="{{index}}" bindtap="switchTab"> <image wx:if="{{item.type === 'image'}}" class="jcover-img-bigicon" src="{{selected === index ? item.iconSelect : item.icon}}"></image> <view class="jtab-text" wx:else style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</view> </view> </view>
Component({ data: { selected: 0, color: "#999999", selectedColor: "#032F82", list: [ { type: 'text', text: "首页" }, { type: 'image', icon: '../../image/icon_map.png', iconSelect: '../../image/icon_map_select.png', text: '' }, { type: 'text', text: "我的" }] }, attached() { }, methods: { switchTab(e) { const data = e.currentTarget.dataset this.setData({selected: data.index}) this.triggerEvent("setTab", data.index) } } })
.jtab-bar { position: fixed; bottom: 0; left: 0; right: 0; height: 100rpx; background: white; display: flex; align-items: center; padding-bottom: env(safe-area-inset-bottom); box-shadow: 0px -2rpx 2rpx rgba(153, 153, 153, 0.1); } .jtab-bar-item { text-align: center; flex: 1; height: 100rpx; } .jtab-bar-item .jtab-text { height: 100rpx; line-height: 100rpx; } .jcover-img-bigicon { position: fixed; bottom: 0rpx; width: 210rpx; height: 128rpx; padding-bottom: env(safe-area-inset-bottom); margin: 0 auto; right: 0; left: 0; }
:
<view> <swiper class="jswipper-block" current="{{currentTab}}" duration="{{100}}"> <block wx:for="{{background}}" wx:key="*this"> <swiper-item catchtouchmove="swipperStop"> <view class="swiper-item {{item}}">{{item}}</view> </swiper-item> </block> </swiper> <jtabbar bindsetTab="setTabbar"/> </view>
est utilisé dans la page catchtouchmove="swipperStop" est utilisé ici. le glissement manuel est interdit
.jswipper-block { height: calc(100vh - 170rpx); background: #F7F8F9; }
/** * 页面的初始数据 */ data: { background: ['demo-text-1', 'demo-text-2', 'demo-text-3'], currentTab: 0 }, setTabbar({detail}) { this.setData({currentTab: detail}) }, // 轮播图 禁止手动滑动 catchtouchmove="swipperStop" swipperStop(){ },
temporairement complété.
Pour plus de connaissances sur la programmation, veuillez visiter : Vidéos de programmation ! !
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!