微信小程序 选项卡 窗口顶部TabBar页面切换一：数据在wxml中定义
一、效果图
二、TabBar.wxml
<view class="swiper-tab">
<view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">
水果
</view>
<view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">
干果
</view>
<view class="swiper-tab-list {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="swichNav">
蔬菜
</view>
<view class="swiper-tab-list {{currentTab==3 ? 'on' : ''}}" data-current="3" bindtap="swichNav">
海鲜
</view>
</view>
<view wx:if="{{currentTab==0}}" class="swiper-box">
<view class="swiper-box_items">
<image src="../images/mihoutao.png"></image>
<text>猕猴桃</text>
</view>
<view class="swiper-box_items">
<image src="../images/longyan.png"></image>
<text>龙眼</text>
</view>
<view class="swiper-box_items">
<image src="../images/juzi.png"></image>
<text>橘子</text>
</view>
<view class="swiper-box_items">
<image src="../images/huolongguo.png"></image>
<text>火龙果</text>
</view>
<view class="swiper-box_items">
<image src="../images/caomei.png"></image>
<text>草莓</text>
</view>
</view>
<view wx:if="{{currentTab==1}}" class="swiper-box">
<view class="swiper-box_items">
<image src="../images/xiaweiyi.png"></image>
<text>夏威夷果</text>
</view>
<view class="swiper-box_items">
<image src="../images/kaixin.png"></image>
<text>开心果</text>
</view>
<view class="swiper-box_items">
<image src="../images/bigen.png"></image>
<text>碧根果</text>
</view>
<view class="swiper-box_items">
<image src="../images/mangguo.png"></image>
<text>芒果干</text>
</view>
</view>
<view wx:if="{{currentTab==2}}" class="swiper-box">
<view class="swiper-box_items">
<image src="../images/huaye.png"></image>
<text>花椰菜</text>
</view>
<view class="swiper-box_items">
<image src="../images/shengcai.png"></image>
<text>生菜</text>
</view>
<view class="swiper-box_items">
<image src="../images/fanqie.png"></image>
<text>番茄</text>
</view>
</view>
<view wx:if="{{currentTab==3}}" class="swiper-box">
<view>等待上架...</view>
</view>
|
三、wxss
/* pages/TabBar/TabBar.wxss */
/* 1. 选项卡 */
.swiper-tab {
width: 100%; /* 选项卡所占宽度 */
border-bottom: 2rpx solid #777; /* 设置选项卡下边框的样式 */
text-align: center; /* 设置选项卡字体的显示 */
line-height: 80rpx; /* 设置选项卡所占的告诉 */
}
/* 1.1. 选项卡中的子选项 */
.swiper-tab-list {
font-size: 38rpx; /* 设置选项卡字体的大小 */
display: inline-block; /* 行内块元素。（CSS2.1 新增的值） */
width: 25%; /* 每个子选项所占的宽度 */
color: #777; /* 字体的颜色 */
}
/* 1.2. 子选项被选中时的样式 */
.on {
color: #3385ff; /* 选中时字体的颜色 */
border-bottom: 5rpx solid #3385ff; /* 选中时选项卡下边框的样式 */
}
/* 2.选项卡下方的内容 */
.swiper-box{
position: absolute; /* 使用绝对定位 */
top: 10; /* 距离上边距：0px */
left: 40px; /* 距离左边距：80px */
width: 75%; /* 右侧主盒子所占宽度 */
height: 600px; /* 右侧主盒子所占高度 */
padding: 10px; /* 所有 4 个内边距都是 10px*/
box-sizing: border-box; /* 为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制*/
}
/* 2.1. 选项卡下方的内容的每个item */
.swiper-box .swiper-box_items{
float: left; /* 浮动向左 */
width: 33.33%; /* 每个item设置宽度是33.33% */
height: 120px; /* 每个item设置高度是120px */
text-align: center; /* 设置图片下方的提示文字居中显示 */
}
/* 2.2. 选项卡下方的内容的每个图片样式设置 */
.swiper-box .swiper-box_items image{
width: 60px; /* 给图片设置宽度 */
height: 60px; /* 给图片设置高度 */
margin-top: 15px; /* 图片距离上边距15px */
border-radius: 40%; /* 给图片添加圆角边框 */
}
|
四、js
// pages/TabBar/TabBar.js
var app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
// tab切换
currentTab: 0,
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
bindChange: function (e) {
var that = this;
that.setData({
currentTab: e.detail.current
});
},
/**
* 点击tab切换
*/
swichNav: function (e) {
var that = this;
if (this.data.currentTab === e.target.dataset.current) {
return false;
} else {
that.setData({
currentTab: e.target.dataset.current
})
}
}
})
|