微信小程序自定义组件实现tabs选项卡功能

{
 "component": true
}

<!-- 自定义tab标签组件-->
<!-- 标题列表-->
<scroll-view scroll-x="true" class="scroll-view-x" wx:if="{{!ttype || ttype==2}}">
 <view class="scroll-view-item" wx:for="{{tlist}}" wx:key="*this">
 <view class="{{currenttab==(index) ? 'on' : ''}}" bindtap="_swichnav" data-current="{{index}}">{{ !tname ? item.name : item[tname].name }}</view>
 </view>
</scroll-view>
<!--内容列表-->
<slot>
</slot>

//组件的对外属性，是属性名到属性设置的映射表，属性设置中可包含三个字段， 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
 })
 }
 }
})

.scroll-view-x{
 background-color: #fff;
 white-space: nowrap;
 position:fixed;
 z-index:10;
 top:0
}
.scroll-view-x .scroll-view-item{
 display:inline-block;
 margin:0 35rpx;
 line-height: 33px;
 cursor: pointer;
}
.on{
 border-bottom: 2px solid red;
 color: red
}

{
 "navigationbartitletext":"订单列表",
 "usingcomponents": {
 "slidetab": "../../components/navigator/index"
 }
}

<view >
 <slidetab tlist="{{statustype}}" bind:changecurrent="swichnav" currenttab="{{currenttype}}" >
 <swiper current="{{currenttype}}" duration="300" bindchange="bindchange" style="height: {{windowheight-35}}px;margin-top:35px;">
 <block>
  <swiper-item wx:for="{{list}}">
  <view class="no-order" hidden="{{item.length ? true : false}}">
  <image src="../../assets/imgs/no-order.png" class="no-order-img"></image>
  <view class="text">暂无订单</view>
  </view>
  <scroll-view scroll-y="true" class="order-list" scroll-with-animation="true" lower-threshold="1" bindscrolltolower="scrolltolower" style="height: {{windowheight-35}}px;" hidden="{{item ? flase : true}}">
  <view class="a-order" wx:for="{{item}}" wx:key="childindex" wx:for-item="childitem" >
  <view class="order-date">
   <view class="date-box">下单时间：{{childitem.dateadd}}</view>
   <view class="status {{(childitem.status==-1 || childitem.status==4) ? '':'red'}}">{{item.statusstr}}</view>
  </view>
  <view class="goods-info" bindtap="orderdetail" data-id="{{childitem.id}}">
   <view class="goods-des">
   <view>订单号 : {{childitem.ordernumber}} </view>
   <view wx:if="{{childitem.remark && childitem.remark != ''}}">备注： {{item.remark}}</view>
   </view>
  </view>
  <view >
   <scroll-view class="goods-img-container" scroll-x="true">
   <view class="img-box" wx:for="{{goodsmap[currenttype][childitem.id]}}" wx:for-item="child_item">
    <image src="{{child_item.pic}}" class="goods-img"></image>
   </view>
   </scroll-view>
  </view>
  <view class="price-box">
   <view class="total-price">合计：¥ {{childitem.amountreal}}</view>
   <view class="btn cancel-btn" hidden="{{childitem.status==0? false : true}}" bindtap="cancelordertap" data-id="{{childitem.id}}">取消订单</view>
   <view class="btn topay-btn" hidden="{{childitem.status==0? fslse : true}}" bindtap="topaytap" data-id="{{childitem.id}}" data-money="{{childitem.amountreal}}">马上付款</view> 
  </view> 
  </view>
  </scroll-view>
  </swiper-item>
 </block>
 </swiper>
 </slidetab>
</view>

var wxpay = require('../../utils/pay.js')
var app = getapp();
page({
 data:{
 statustype:[
 {name:"待付款",page:0},
 {name:"待发货",page:0},
 {name:"待收货",page:0},
 {name:"待评价",page:0},
 {name:"已完成",page:0}],
 currenttype:0,
 list:[[],[],[],[],[]],
 goodsmap:[{},{},{},{},{}],
 logisticsmap:[{},{},{},{},{}],
 windowheight:''
 },
 onload(options){
 this.getlist();
 var systeminfo = wx.getsysteminfosync()
 this.setdata({
 windowheight: systeminfo.windowheight,
 currenttype:options.id ? options.id:0
 })
 },
 // 点击tab切换 
 swichnav: function (res) {
 if (this.data.currenttype == res.detail.currentnum) return;
 this.setdata({
 currenttype: res.detail.currentnum
 })
 } , 
 bindchange:function(e){
 this.setdata({
 currenttype: e.detail.current
 })
 if (!this.data.list[e.detail.current].length)
 this.getlist();
 } ,
 getlist(){
 wx.showloading();
 var that = this;
 var postdata = {
 token: app.globaldata.token,
 status: that.data.currenttype
 };
 var _page = that.data.statustype[that.data.currenttype].page+1 ;;
 wx.request({
 url: app.globaldata.baseurl + '/order/list',
 data: postdata,
 success: (res) => {
 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();
  }
  }
  })
 }
 }
 })
 }
})

.container{
 width: 100%;
 background-color: #f2f2f2;
}
.status-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;
}