微信小程序自定义组件实现标签页功能

本文分享微信小程序实现tabs tab功能的具体代码，供大家参考。具体内容如下

自定义组件由JSON wxml wxsjs文件组成。要编写自定义组件，首先需要在json文件中声明自定义组件(将组件字段设置为true，将这组文件设置为自定义组件)

组件/导航器/索引. json

{ ' component ' : true }组件/导航器/index.wxml

！-自定义标签组件-！-title list-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=' { { current tab==(index)？'on ' : ' ' } } ' bind tap=' _ Swichnav ' data-current=' { { index } } ' { {！tname？item.name : item[tname]。name }}/view /view/scroll-view！-目录-插槽/插槽组件/导航器/index.js

//组件的外部属性是属性名称到属性设置的映射表，可以包含三个字段。Type表示属性类型，value表示属性的初始值，observer表示属性值更改时的响应函数Component({ properties : {//title list tlist 3360 { type : array，value: []})。//当前选项卡索引当前选项卡： {类型：数字，值：0，观察者：函数(newval，Oldval) {this。setdata({ current tab : newval })}，//组件方法，包括事件响应函数和任意自定义方法，关于事件响应函数的使用，建议methods:{ //内部方法以下划线_swichNav:function(e)开头{ //当自定义组件触发事件时，需要使用triggerEvent方法。为此指定事件名称、详细对象和事件选项。triggerevent ('change current '，{currentnum:e。current target . dataset . current })} })组件/导航器/index.wxss。滚动-视图-x { background-color : # fff；white-space : nowrap；位置：固定；z索引：10；top:0}。滚动视图项{ display : inline-block；margin:0 35rpx线高： 33px；cursor:指针；}.在{ border-bottom: 2px纯红；使用定制组件的Color: red}

在使用注册的自定义组件之前，您应该首先在页面的json文件中进行引用声明。此时，您需要提供每个自定义组件的标签名称和相应的自定义组件文件路径：

页面/订单列表/索引. json

{ ' navigationBarTitleText ' : '订单列表'，'使用组件' : { '幻灯片选项卡' : '././components/navigator/index'}}这样就可以像基本组件一样，在页面的wxml中使用自定义组件。节点名是自定义组件的标签名，节点属性是传递给组件的属性值。

pages/order-list/index.wxml

视图幻灯片选项卡TList=' { { StatusyPe } } ' Bind : ChangeCurrent=' Swichnav ' CurrentTab=' { { CurrentType } } ' Swiper Current=' { { CurrentType } } ' duration=' 300 ' BindChange=' BindChange ' style=' height : { { WindowHeight-35 } } px；'页边距-顶部：35 pxblock swiper-item wx : for=“{ { list } }”view class=“no-order”hidden=“{ { item。长度？true : false } }”图像src="http :/./资产/imgs/无订单。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 ' bindscrolltower=' scroll tower ' style=' height : { { window height-35 } } px；'隐藏='{{item？flase : true } } ' view class=' a-order ' wx : for=' { { item } } ' wx : key=' child index ' wx : for-item=' child item ' view class=' order-date ' view class=' date-box '下单时间：{ {子项。dateADd } }/view view class=' status { {(子项。状态==-1 | |子项目。status==4)': ' red ' } } ' { { item。status str } }/view/view view class=' goods-info ' bind tap=' order detail ' data-id=' { { child item。id } } ' view class=' goods-des '视图订单号： { { child item }。订单号} }/view view wx : if=' { {子项。备注子项目。备注！=''}}'备注：{ { item。remote } }/view/view/view scroll-view class=' goods-img-container ' scroll-x=' true ' view class=' img-box ' wx : for=' { { goodsMap[CurrentType][子项。id]}“}”wx : for-item=“child _ item”image src=“http : ”{ { child _ item。pic } } ' class=' goods-img '/image/view/scroll-view/view合计：{ {子项。amountreal } }/view view class=' BTN取消-BTN ' hidden=' { {子项。状态==0？false : true } } ' bind tap=' cancelOrderTap ' data-id=' { { child item。id } } '取消订单/view view class=' BTN托佩-BTN ' hidden=' { {子项。状态==0？fslse : true } } ' bind tap=' toPayTap ' data-id=' { { child item。id } } ' data-money=' { { childitem。' amountreal } } '马上付款/view/view/view/scroll-view/swiper-item/block/swiper/slide tab/viewpages/order-list/index。射流研究…

var wxpay=require('././utils/pay。js ')var app=GetApp()；页面({ data : { statusy PE : [{ name : })待付款，第：0页，{name: '待发货，第：0页，{name: '待收货，第：0页，{name: '待评价，第：0页，{name: '已完成，page:0}]，currentType:0，list:[[]，[]，[]]，goodsMap:[{}，{}，{}，{}，logisticsmap 3360[{}，{}，{}，{}，{}，{}，{}，{ }，{}]，windowHeight:'' }，onLoad(options){ this。getlist()；var系统信息=wx。getsysteminfosync()这个。setdata({ windowheight :系统信息。窗口高度，currentType:options.id？options.id:0 }) }，//点击标签切换swichNav:函数如果这个。数据。currenttype==RES . detail。当前um)返回；这个。setdata({ CurrentType : RES . detail。CurrentNum })}，BindChange : FuncTion(e){ this。setdata({ CurrentType : e . detail。current })if(！这个。数据。列表[e . detail。当前].长度)这个。getlist()；}，getList(){ wx。show loading()；变量=这个；var post数据={ token : app。全球数据。令牌，状态：数据。current type }；var _ page=那个。数据。地位。数据。当前类型].第一页；wx。请求({ URL : app。全球数据。基础URL '/订单/列表'，data: postData，success :(RES)={ wx。hide loading()；var param={}，str 1=' list['该。数据。currenttype ']'，str 2=' statusype['该。数据。currenttype '].page '，str 3=' logisticmap['该。数据。currenttype ']'，str 4=' goodsMap['该。数据。current type ']'；if(RES .数据。代码==0){ param[ST R1]=RES . data。数据。订单清单；param[str 2]=_ page；参数[str 3]=RES . data。数据。物流地图；参数[str 4]=RES . data。数据。goodsmap那个。setdata(param)；} else { param[ST . R1]=[]；param[str 3]={ }；param[str 4]={ }；这个。setdata(param)；} } }) }，orderDetail:函数(e){ var orderId=e . CurrentTarget。数据集。id；wx。navigateto({ URL : '/页面/订单-详细信息/索引？id=' orderId }) }，cancelOrderTap:函数{ var即=this var orderId=e . CurrentTarget。数据集。id；wx.showModal({ title: '确定要取消该订单吗？'，content: ' '，success:函数如果确认。show loading()；wx。请求({ URL : app。全球数据。基础URL '/订单/关闭'，数据： { token : app。全球数据。令牌，orderId: orderId }，成功：(RES)={ wx。hide loading()；if(RES .数据。code==0){ var param={ }，str=' statusype['该。数据。currenttype '].页面；param[str]=0；那个。GetList()；} } })} })})} })页面/订单列表/index.wxss。容器{宽度： 100%;背景-color : # F2 f 2；}.状态框{宽度：100%；高度： 88rpx线高： 88rpxdisplay : flex justice-content :空格；align-items:居中；背景-color : # fff；}.状态框。状态标签{ width: 150rpx高度： 100%;文本对齐：中心；font-size :28 rpx颜色： # 353535盒子尺寸：边框盒子；相对位置：}.状态框状态标签。活动{ color : # e 64340边框-底部： 6rpx实心# e64340}。状态框。状态标签。红点{ width : 16 rpx h8 : 16 rpx绝对位置：left: 116rpxtop:23rpx背景-颜色： # f 43530边界半径： 50%;}.无订单{宽度： 100%；绝对位置：底部： 0；top :0 left : 0；右： 0；文本对齐：中心；衬垫-顶部： 203 rpx背景-color : # F2 f 2；}.无订单-img { width : 81 rpx；高度： 96rpx边距-底部： 31r px}.不点菜文本{ font-size :28 rpx颜色： # 999999文本-对齐：中心}。订单列表{宽度： 100%；}.订单清单a .级{宽度： 100%；背景-color : # fff；保证金-top : 20 rpx；}.订单清单。订单。订单日期{ padd : 0 30 rpx h8 : 88 rpx display : flex justice-content :空格；font-size :26 rpxcolor : # 000000 align-items :居中；}.订单清单。订单。订单日期红色{ font-size :26 rpxcolor: # e64340}。订单。商品信息。货物-img-集装箱{ width: 720rpx左边距left : 30 rpx border-top : 1rpx实心# eee border-bottom : 1px实心# eee padd : 30 rpx 0；display : flex align-items :居中；}.商品信息img-box {宽度： 120 rpx高度： 120rpx飞越：隐藏；右边距： 30 rpx背景-颜色： # f7f 7；}.商品信息img-box商品img .货物-img-集装箱img-box货物-img { width : 120 rpx；高度： 120rpx}。商品信息货物-货物{宽度： 540 rpx高度： 78rpx线高： 39 rpxfont-size :26 rpxcolor: # 000000飞越：隐藏；}.货物-img-集装箱{ height: 180rpx盒子尺寸：边框盒子；空白： nowrap}.货物-img-集装箱img-box {宽度： 120 rpx高度： 120rpx飞越：隐藏；右边距： 20 rpx背景-颜色： # f7f 7；显示器：内联块；}.订单清单。订单。价格框{位置：相对；宽度： 720 rpx高度： 100 rpx左边距左： 30rpx盒子尺寸：边框盒子；padd : 20 rpx 30 rpx 20 rpx 0；display : flex align-items :居中；正义-内容：空格；font-size :26 rpx}.订单清单。订单。价格箱。总价{ font-size :26 rpxcolor: # e64340}。订单。价格箱BTN { width : 166 rpx h8 : 60 rpx盒子尺寸：边框盒子；文本对齐：中心；线高： 60 rpx边界半径： 6rpx左边距left: 20rpx}。订单。价格箱取消-BTN {边框： 1rpx实心# CCC绝对位置：right: 216rpxtop:20rpx}。订单。价格箱topay-BTN { border 33601 px固体# e64340color: # e64340}效果图

项目地址：微信小程序实现制表符选项卡功能

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。