自己最近也是刚用到微信小程序,发现CSDN里面关于微信小程序顶部导航栏切换部分并没有最新版本的,所以给大家分享一下 供大家开发时参考一下; ^_^
效果图
wxml部分
<!--导航条--><view class="navbar"><text wx:for="{{navbar}}" wx:key="unique" data-idx="{{index}}" bindtap="navbarTap" class="item {{currentTab==index ? 'active' : ''}}">{{item}}</text></view><!--综合--><view hidden="{{currentTab!==0}}" class="navbarList"><!-- 商品列表 --><view class="productList" wx:for="{{goods}}" wx:key="*this" wx:for-item="lists"><view class="productList_boxs"><view class="goodsImage"></view><view class="message"><view class="goodsName">【崔二庄】商品名称</view><view class="level">{{lists.level}}</view><view class="price">￥<span class="fontred">1</span>.0/斤</view></view></view></view></view><!--销量--><view hidden="{{currentTab!==1}}" class="navbarList">tab_03</view><!--最新--><view hidden="{{currentTab!==2}}" class="navbarList">tab_03</view><!--价格--><view hidden="{{currentTab!==3}}" class="navbarList">tab_04</view><!--筛选--><view hidden="{{currentTab!==4}}" class="navbarList">tab_05</view>
wxss部分
page {display: flex;flex-direction: column;height: 100%;}.navbar {flex: none;display: flex;background: #fff;border-bottom: 2rpx solid #cdcdcd;}.navbar .item {color: #cdcdcd;position: relative;flex: auto;text-align: center;line-height: 80rpx;}.navbar .item.active {color: #1a1a1a;font-weight: bold;}.navbar .item.active:after {content: "";display: block;position: absolute;bottom: 0;left: 0;right: 0;height: 4rpx;}.navbarList {width: 100%;display: flex;flex-direction: row;flex-wrap: wrap;background-color: #F5F6F7;}.productList {width: 45.5%;padding: 20rpx 10rpx 20rpx 20rpx;display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-between;}.productList_boxs {display: flex;width: 340rpx;height: 400rpx;align-items: flex-start;flex-direction: column;background-color: #ffffff;border-radius: 10rpx;overflow: hidden;}.message {display: flex;flex-direction: column;font-size: 28rpx;padding: 6rpx 20rpx;}.goodsImage {width: 340rpx;height: 250rpx;background-color: rgb(167, 208, 209);}.level {color: #a8a8a8;}.price {color: red;font-size: 28rpx;}.fontred {color: red;font-size: 34rpx;font-weight: bold;}
js部分
var app = getApp()Page({data: {navbar: ['综合','销量','最新','价格','筛选'],goods: [{level:'综合'},{level:'综合'},{level:'综合'},{level:'综合'},{level:'综合'}],currentTab: 0},navbarTap: function (e) {this.setData({currentTab: e.currentTarget.dataset.idx})}})
