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

本文为大家分享微信小程序实现tabs选项卡功能的具体代码,供大家参考,具体内容如下

一个自定义组件由 json wxml wxss js 4个文件组成。要编写一个自定义组件,首先需要在 json 文件中进行自定义组件声明(将 component 字段设为 true 可这一组文件设为自定义组件)

components/navigator/index.json

rush:js;"> { "component": true }

components/navigator/index.wxml

rush:xml;">

components/navigator/index.js

rush: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

rush:css;"> .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 }

使用自定义组件

使用已注册自定义组件前,首先要在页面的 json 文件中进行引用声明。此时需要提供每个自定义组件的标签名和对应的自定义组件文件路径:

pages/order-list/index.json

rush:js;"> { "navigationBarTitleText":"订单列表","usingComponents": { "slideTab": "../../components/navigator/index" } }

这样,在页面的 wxml 中就可以像使用基础组件一样使用自定义组件。节点名即自定义组件的标签名,节点属性即传递给组件的属性值。

pages/order-list/index.wxml

rush:xml;"> 订单号 : {{childItem.orderNumber}} Box" wx:for="{{goodsMap[currentType][childItem.id]}}" wx:for-item="child_item"> Box">

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

rush:css;"> .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; }

效果

这里写图片描述

项目地址:nofollow" target="_blank" href="https://github.com/hanxue10180/shangcheng">微信小程序实现tabs选项卡功能

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

相关文章

开发微信小程序的用户授权登录功能
小程序开发页面如何实现跳转?
浅谈小程序开发中蓝牙连接错误分析及解决方法
什么是小程序?它有哪些功能?
如何配置小程序开发项目结构?(教程)
怎么把自己的店加入小程序