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


Posted in Javascript onJuly 14, 2018

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

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

components/navigator/index.json

{
 "component": true
}

components/navigator/index.wxml

<!-- 自定义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>

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

.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

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

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

pages/order-list/index.wxml

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

pages/order-list/index.js

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();
  }
  }
  })
 }
 }
 })
 }
})

pages/order-list/index.wxss

.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;
}

效果图

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

项目地址:微信小程序实现tabs选项卡功能

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery对象和DOM对象使用说明
Jun 25 Javascript
关于js数组去重的问题小结
Jan 24 Javascript
window.location不跳转的问题解决方法
Apr 17 Javascript
JavaScript不使用prototype和new实现继承机制
Dec 29 Javascript
jQuery创建自定义的选择器用以选择高度大于100的超链接实例
Mar 18 Javascript
JS实现网页游戏中滑块响应鼠标点击移动效果
Oct 19 Javascript
angularjs实现分页和搜索功能
Jan 03 Javascript
react 实现页面代码分割、按需加载的方法
Apr 03 Javascript
vue-cli 打包使用history模式的后端配置实例
Sep 20 Javascript
layui问题之自动滚动二级iframe页面到指定位置的方法
Sep 18 Javascript
JS实现网站吸顶条
Jan 08 Javascript
JavaScript交换变量常用4种方法解析
Sep 02 Javascript
微信小程序scroll-view仿拼多多横向滑动滚动条
Apr 21 #Javascript
微信小程序实现自上而下字幕滚动
Jul 14 #Javascript
微信小程序scroll-view实现字幕滚动
Jul 14 #Javascript
微信小程序仿RadioGroup改变样式的处理方案
Jul 13 #Javascript
通过封装scroll.js 获取滚动条的值
Jul 13 #Javascript
详解vue.js根据不同环境(正式、测试)打包到不同目录
Jul 13 #Javascript
Angular5.0 子组件通过service传递值给父组件的方法
Jul 13 #Javascript
You might like
无线电广播的开始
2002/01/30 无线电
PHP使用SOAP调用.net的WebService数据
2013/11/12 PHP
php进行支付宝开发中return_url和notify_url的区别分析
2014/12/22 PHP
PHP中error_log()函数的使用方法
2015/01/20 PHP
由php中字符offset特征造成的绕过漏洞详解
2017/07/07 PHP
PHP设计模式之工厂模式定义与用法详解
2018/04/03 PHP
javascript事件模型代码
2007/07/01 Javascript
javascript 写类方式之十
2009/07/05 Javascript
jQuery 打造动态下滑菜单实现说明
2010/04/15 Javascript
javascrip客户端验证文件大小及文件类型并重置上传
2011/01/12 Javascript
Jquery知识点二 jquery下对数组的操作
2011/01/15 Javascript
jQuery数据缓存功能的实现思路及简单模拟
2013/05/27 Javascript
不提示直接关闭网页窗口的JS示例代码
2013/12/17 Javascript
深入解析桶排序算法及Node.js上JavaScript的代码实现
2016/07/06 Javascript
JavaScript实现的select点菜功能示例
2017/01/16 Javascript
js利用for in循环获取 一个对象的所有属性以及值的实例
2017/03/30 Javascript
利用JS判断客户端类型你应该知道的四种方法
2017/12/22 Javascript
JavaScript实现正则去除a标签并保留内容的方法【测试可用】
2018/07/18 Javascript
js中innerText/textContent和innerHTML与target和currentTarget的区别
2019/01/21 Javascript
Vue修改项目启动端口号方法
2019/11/07 Javascript
vue实现element表格里表头信息提示功能(推荐)
2019/11/20 Javascript
JavaScript事件循环及宏任务微任务原理解析
2020/09/02 Javascript
对vue生命周期的深入理解
2020/12/03 Vue.js
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
2020/12/30 Vue.js
[01:17]辉夜杯战队访谈宣传片—EHOME
2015/12/25 DOTA
[01:01:23]完美世界DOTA2联赛PWL S2 Forest vs FTD.C 第一场 11.26
2020/11/30 DOTA
Python实现改变与矩形橡胶的线条的颜色代码示例
2018/01/05 Python
python实现机器学习之多元线性回归
2018/09/06 Python
如何使用python的ctypes调用医保中心的dll动态库下载医保中心的账单
2020/05/24 Python
英国卫浴商店:Ergonomic Design
2019/09/22 全球购物
抽象类和接口的区别
2012/09/19 面试题
通信工程求职信
2014/07/16 职场文书
幼儿园教师岗位职责
2015/04/02 职场文书
企业爱心捐款倡议书
2015/04/27 职场文书
详解Nginx 工作原理
2021/03/31 Servers
pytorch中的model.eval()和BN层的使用
2021/05/22 Python