【微信小程序】tab选项卡
2021/4/7 22:08:33
本文主要是介绍【微信小程序】tab选项卡,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
<view class="tabs"> <view class="tabNav"> <view class="{{currentTab==index ? 'cur' : ''}}" wx:for="{{navTab}}" wx:key="index" data-idx="{{index}}" bindtap="currentTab"> <text>{{item}}</text> </view> </view> <view class="tabCont"> <view class="tabItem" wx:if="{{currentTab==0}}"> <view class="noCont"> <image src="/images/noContent.png" mode="widthFix" /> <text>内有内容1</text> <navigator url="" hover-class="className">看看推荐</navigator> </view> </view> <view class="tabItem" wx:if="{{currentTab==1}}"> <view class="noCont"> <image src="/images/noContent.png" mode="widthFix" /> <text>内有内容2</text> <navigator url="" hover-class="className">看看推荐</navigator> </view> </view> <view class="tabItem" wx:if="{{currentTab==2}}"> <view class="noCont"> <image src="/images/noContent.png" mode="widthFix" /> <text>内有内容3</text> <navigator url="" hover-class="className">看看推荐</navigator> </view> </view> <view class="tabItem" wx:if="{{currentTab==3}}"> <view class="noCont"> <image src="/images/noContent.png" mode="widthFix" /> <text>内有内容4</text> <navigator url="" hover-class="className">看看推荐</navigator> </view> </view> </view> </view>
data: { currentTab:0, navTab: ['我的收藏','我的已购','收听历史', '我的礼包'] }, currentTab:function(e){ // console.log(e.currentTarget.dataset.idx); this.setData({ currentTab: e.currentTarget.dataset.idx }) },
.tabs .tabNav { width: 100%; height: 80rpx; line-height: 80rpx; background: #fff; display: flex; justify-content: space-between; border-bottom: 1px solid #f5f5f5; margin-top: 40rpx; } .tabs .tabNav > view { text-align: center; color: #666; } .tabs .tabNav > view:last-child { margin-right: 0; } .tabs .tabNav > view text { height: 80rpx; display: inline-block; position: relative; } .tabs .tabNav .cur text { color: #000; font-weight: bold; } .tabs .tabNav .cur text::before { position: absolute; content: ""; bottom: 0; left: 50%; transform: translateX(-50%); width: 50rpx; height: 6rpx; background: #ff4b1c; border-radius: 8rpx; } .tabs .tabCont .tabItem .noCont { margin-top: 80rpx; display: flex; flex-direction: column; justify-content: center; align-items: center; } .tabs .tabCont .tabItem .noCont image { width: 70%; margin-bottom: 30rpx; } .tabs .tabCont .tabItem .noCont text { color: #999; display: block; margin-bottom: 25rpx; } .tabs .tabCont .tabItem .noCont navigator { color: #666; background: #f7f7f7; width: 250rpx; height: 75rpx; line-height: 75rpx; text-align: center; border: 1rpx solid #ddd; border-radius: 80rpx; }
这篇关于【微信小程序】tab选项卡的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-31微信小程序怎么实现关注公众号功能-icode9专业技术文章分享
- 2024-10-30微信小程序cover-view,支持bindtap吗-icode9专业技术文章分享
- 2024-10-30微信小程序的cover-image支持bindtap吗-icode9专业技术文章分享
- 2024-10-30微信小程序web-view怎么设置高度?-icode9专业技术文章分享
- 2024-10-30微信小程序中 onLoad和onready哪个先加载-icode9专业技术文章分享
- 2024-10-29小程序 wx.getStorageSync('token')如何清除-icode9专业技术文章分享
- 2024-10-29小程序防止冒泡e.stopPropagation()是什么-icode9专业技术文章分享
- 2024-10-29小程序的点击事件页面如何写-icode9专业技术文章分享
- 2024-10-25微信小程序如何使用echarts的折线图-icode9专业技术文章分享
- 2024-10-21微信小程序 如何获取页面路径-icode9专业技术文章分享