微信小程序实现tab点击切换
本文实例为大家分享了微信小程序无滑动效果的tab点击切换的具体代码，供大家参考，具体内容如下
<!--pages/dingdan/dingdan.wxml-->
<view class="body">
<view class="swiper-tab">
<view wx:for="{{tabList}}" wx:key="index" catchtap="change" class="{{page==index?'selected-menu':'unselect-menu'}}" data-pageid="{{index}}">{{item.title}}({{item.num}})
<hr class="{{page==index?'selected-line':'unselect-line'}}" />
</view>
</view>
<view class="view-Content">
<view wx:for="{{tabList}}" wx:key="index" class="{{page==index?'show tabCon':'hidden tabCon'}}">
<view class="content">
<text>暂无订单{{index}}</text>
</view>
</view>
</view>
</view>
/* pages/dingdan/dingdan.wxss */
page {
width: 100%;
height: 100%;
overflow: hidden;
/* background: pink; */
}
.body {
height: 100%;
/* background: hotpink; */
display: flex;
flex-direction: column;
}
/* tab栏 */
.swiper-tab {
width: 100%;
height: 80rpx;
text-align: center;
display: flex;
justify-content: space-between;
background: white;
}
.selected-menu {
display: flex;
flex-direction: column;
align-items: center;
color: #ff5050;
background: #fff;
font-size: 32rpx;
font-weight: bold;
font-family: PingFang SC;
font-weight: 400;
width: 33%;
height: 60rpx;
line-height: 60rpx;
opacity: 1;
/* border-bottom: 2px solid #ff5050; */
position: relative;
}
.unselect-menu {
display: flex;
flex-direction: column;
align-items: center;
font-size: 16px;
font-family: PingFang SC;
font-weight: 400;
color: #4f4f50;
width: 33%;
height: 60rpx;
line-height: 60rpx;
background: #fff;
opacity: 1;
position: relative;
/* border-radius: 34rpx; */
}
.selected-line {
background: #ff5050;
height: 4rpx;
width: 90rpx;
position: absolute;
/* margin-top: 10rpx; */
bottom: -18rpx;
width: 60rpx;
}
/* 内容 */
.view-Content {
flex: 1;
overflow-y: auto;
background-color: rgb(236, 236, 236);
}
.tabCon {
height: 100%;
}
/* 展示隐藏 */
.show {
display: block;
}
.hidden {
display: none;
}
Page({
/**
* 页面的初始数据
*/
data: {
page: 0, // page：当前页--
tabList: [{
title: '菜单1',
num: 0
}, {
title: '菜单2',
num: 0
}, {
title: '菜单3',
num: 0
}],
},
// 切换tab
change: function (event) {
console.log('切换时会调用', event);
var a = event.currentTarget.dataset.pageid
this.setData({
page: a,
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
})
