微信小程序自定義組件實現(xiàn)tabs選項卡功能
更新時間：2018年07月14日 10:17:35 作者：hanxue_tyc
這篇文章主要為大家詳細介紹了微信小程序自定義組件實現(xiàn)tabs選項卡功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文為大家分享了微信小程序?qū)崿F(xiàn)tabs選項卡功能的具體代碼，供大家參考，具體內(nèi)容如下
一個自定義組件由 json wxml wxss js 4個文件組成。要編寫一個自定義組件，首先需要在 json 文件中進行自定義組件聲明（將 component 字段設(shè)為 true 可這一組文件設(shè)為自定義組件）
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>
<!--內(nèi)容列表-->
<slot>
</slot>
components/navigator/index.js
//組件的對外屬性，是屬性名到屬性設(shè)置的映射表，屬性設(shè)置中可包含三個字段， type 表示屬性類型、 value 表示屬性初始值、 observer 表示屬性值被更改時的響應函數(shù)
Component({
properties:{
//標題列表
tList:{
type: Array,
value:[]
},
//當前tab index
currentTab:{
type:Number,
value:0,
observer: function (newVal, oldVal) {
this.setData({
currentTab : newVal
})
}
}
},
//組件的方法，包括事件響應函數(shù)和任意的自定義方法，關(guān)于事件響應函數(shù)的使用
methods:{
// 內(nèi)部方法建議以下劃線開頭
_swichNav:function(e){
//自定義組件觸發(fā)事件時，需要使用 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 中就可以像使用基礎(chǔ)組件一樣使用自定義組件。節(jié)點名即自定義組件的標簽名，節(jié)點屬性即傳遞給組件的屬性值。
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:"待發(fā)貨",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;
}
效果圖
項目地址：微信小程序?qū)崿F(xiàn)tabs選項卡功能
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
ES6下如何實現(xiàn)子組件調(diào)用父組件？下面小編就為大家分享一篇ES6下子組件調(diào)用父組件的方法。希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
JS控制靜態(tài)頁面之間傳遞參數(shù)獲取參數(shù)并應用的簡單實例
下面小編就為大家?guī)硪黄狫S控制靜態(tài)頁面之間傳遞參數(shù)獲取參數(shù)并應用的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
dedecms在編輯修改內(nèi)容時,TAG標簽需要手動輸,中文的Tag, 中間還得用半角字符','分隔, 輸入法切來切去很不方便, 于是動手改后臺代碼, 利用后臺的tags_main.php, 讓dedecms添加內(nèi)容時能去tags_main里去選擇.2014-09-09
EChart開源來自百度商業(yè)前端數(shù)據(jù)可視化團隊，基于html5?Canvas，是一個純Javascript圖表庫，提供直觀，生動，可交互，可個性化定制的數(shù)據(jù)可視化圖表。本文將利用EChart實現(xiàn)圖例中顯示百分比的效果，感興趣的可以學習一下2022-03-03
這篇文章主要介紹了Javascript刷新頁面的實例的相關(guān)資料,希望通過本文能幫助到大家，需要的朋友可以參考下2017-09-09
下面的這段代碼中，我們通過select元素的name屬性來設(shè)置具體要訪問style的哪個屬性（本例中為背景色），這樣，這個函數(shù)就可以用來設(shè)置不同的CSS屬性了2012-08-08
正因為JavaScript本身沒有完整的類和繼承的實現(xiàn)，并且我們也看到通過手工實現(xiàn)的方式存在很多問題， 因此對于這個富有挑戰(zhàn)性的任務(wù)網(wǎng)上已經(jīng)有很多實現(xiàn)了2009-07-07
如果你無法理解博文在講什么，請回顧前面的系列博文。文章比較深入，如有不對之處，望請指正，謝謝。2010-10-10
這篇文章主要介紹了微信小程序網(wǎng)絡(luò)請求封裝示例,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
這篇文章主要為大家詳細介紹了JavaScript分頁組件使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-07-07