本文为大家分享了微信小程序实现tabs选项卡功能的具体代码，供大家参考，具体内容如下
一个自定义组件由 json wxml wxss js 4个文件组成。要编写一个自定义组件，首先需要在 json 文件中进行自定义组件声明（将 component 字段设为 true 可这一组文件设为自定义组件）
components/navigator/index.json
components/navigator/index.wxml
components/navigator/index.js
属性，是属性名到属性设置的映射表，属性设置中可包含三个字段， type 表示属性类型、 value 表示属性初始值、 observer 表示属性值被更改时的响应函数
Component({
properties:{
//标题列表
tList:{
type: Array,value:[]
},//当前tab index
currentTab:{
type:Number,value:0,observer: function (newVal,oldVal) {
this.setData({
currentTab : newVal
})
}
}
},//组件的方法，包括事件响应函数和任意的自定义方法，关于事件响应函数的使用
methods:{
// 内部方法建议以下划线开头
_swichNav:function(e){
//自定义组件触发事件时，需要使用 triggerEvent 方法，指定事件名、detail对象和事件选项
this.triggerEvent('changeCurrent',{
currentNum: e.currentTarget.dataset.current
})
}
}
})
components/navigator/index.wxss
使用自定义组件
使用已注册的自定义组件前，首先要在页面的 json 文件中进行引用声明。此时需要提供每个自定义组件的标签名和对应的自定义组件文件路径：
pages/order-list/index.json
这样，在页面的 wxml 中就可以像使用基础组件一样使用自定义组件。节点名即自定义组件的标签名，节点属性即传递给组件的属性值。
pages/order-list/index.wxml
pages/order-list/index.js
{
wx.hideLoading();
var param = {},str1 = "list[" + that.data.currentType + "]",str2 = 'statusType[' + that.data.currentType + '].page',str3 = "logisticsMap[" + that.data.currentType + "]",str4 = "goodsMap[" + that.data.currentType + "]" ;
if (res.data.code == 0) {
param[str1] = res.data.data.orderList ;
param[str2] = _page ;
param[str3] = res.data.data.logisticsMap ;
param[str4] = res.data.data.goodsMap ;
that.setData(param);
} else {
param[str1] = [];
param[str3]= {};
param[str4] = {};
this.setData(param);
}
}
})
},orderDetail: function (e) {
var orderId = e.currentTarget.dataset.id;
wx.navigateTo({
url: "/pages/order-details/index?id=" + orderId
})
},cancelOrderTap: function (e) {
var that = this;
var orderId = e.currentTarget.dataset.id;
wx.showModal({
title: '确定要取消该订单吗？',content: '',success: function (res) {
if (res.confirm) {
wx.showLoading();
wx.request({
url: app.globalData.baseUrl + '/order/close',data: {
token: app.globalData.token,orderId: orderId
},success: (res) => {
wx.hideLoading();
if (res.data.code == 0) {
var param = {},str = 'statusType[' + that.data.currentType + '].page';
param[str]=0;
that.getList();
}
}
})
}
}
})
}
})
pages/order-list/index.wxss
Box{
width:100%;
height: 88rpx;
line-height: 88rpx;
display: flex;
justify-content: space-between;
align-items: center;
background-color: #fff;
}
.status-Box .status-label{
width: 150rpx;
height: 100%;
text-align: center;
font-size:28rpx;
color:#353535;
Box-sizing: border-Box;
position: relative;
}
.status-Box .status-label.active{
color:#e64340;
border-bottom: 6rpx solid #e64340;
}
.status-Box .status-label .red-dot{
width: 16rpx;
height: 16rpx;
position: absolute;
left: 116rpx;
top:23rpx;
background-color: #f43530;
border-radius: 50%;
}
.no-order{
width: 100%;
position: absolute;
bottom: 0;
top:0;
left: 0;
right: 0;
text-align: center;
padding-top: 203rpx;
background-color: #F2f2f2;
}
.no-order-img{
width: 81rpx;
height: 96rpx;
margin-bottom: 31rpx;
}
.no-order .text{
font-size:28rpx;
color:#999999;
text-align: center
}
.order-list{
width: 100%;
}
.order-list .a-order{
width: 100%;
background-color: #fff;
margin-top: 20rpx;
}
.order-list .a-order .order-date{
padding: 0 30rpx;
height: 88rpx;
display: flex;
justify-content: space-between;
font-size:26rpx;
color:#000000;
align-items: center;
}
.order-list .a-order .order-date .red{
font-size:26rpx;
color:#e64340;
}
.a-order .goods-info,.goods-img-container{
width: 720rpx;
margin-left: 30rpx;
border-top: 1rpx solid #eee;
border-bottom: 1rpx solid #eee;
padding: 30rpx 0;
display: flex;
align-items: center;
}
.goods-info .img-Box{
width: 120rpx;
height: 120rpx;
overflow: hidden;
margin-right: 30rpx;
background-color: #f7f7f7;
}
.goods-info .img-Box .goods-img,.goods-img-container .img-Box .goods-img{
width: 120rpx;
height: 120rpx;
}
.goods-info .goods-des{
width: 540rpx;
height: 78rpx;
line-height: 39rpx;
font-size:26rpx;
color:#000000;
overflow: hidden;
}
.goods-img-container{
height: 180rpx;
Box-sizing: border-Box;
white-space: nowrap;
}
.goods-img-container .img-Box{
width: 120rpx;
height: 120rpx;
overflow: hidden;
margin-right: 20rpx;
background-color: #f7f7f7;
display: inline-block;
}
.order-list .a-order .price-Box{
position: relative;
width: 720rpx;
height: 100rpx;
margin-left: 30rpx;
Box-sizing: border-Box;
padding: 20rpx 30rpx 20rpx 0;
display: flex;
align-items: center;
justify-content: space-between;
font-size:26rpx;
}
.order-list .a-order .price-Box .total-price{
font-size:26rpx;
color:#e64340;
}
.a-order .price-Box .btn{
width: 166rpx;
height: 60rpx;
Box-sizing: border-Box;
text-align: center;
line-height: 60rpx;
border-radius: 6rpx;
margin-left: 20rpx;
}
.a-order .price-Box .cancel-btn{
border: 1rpx solid #ccc;
position: absolute;
right: 216rpx;
top:20rpx;
}
.a-order .price-Box .topay-btn{
border:1px solid #e64340;
color: #e64340;
}
效果图
项目地址：nofollow" target="_blank" href="https://github.com/hanxue10180/shangcheng">微信小程序实现tabs选项卡功能
原文链接：https://www.f2er.com/weapp/31511.html