本文为大家分享了微信小程序实现标签选项卡功能的具体代码,供大家参考,具体内容如下
一个自定义组件由json wxml wxs js 4个文件组成。要编写一个自定义组件,首先需要在json文件中进行自定义组件声明(将组件字段设为真正的可这一组文件设为自定义组件)
组件/导航/index.json
{
“组件”:真的
}
组件/导航/index.wxml
& lt; !——自定义标签标签组件——比;
& lt; !——标题列表——比;
& lt;滚动视图scroll-x=" true " class=" scroll-view-x wx:如果=" {{!式| |式==2}}”在
& lt;视图类=皊croll-view-item”天气:为=" {{tList}} "天气:关键=?“比;
& lt;视图类=" {{currentTab==(指数)& # 63;“在”:“}}”bindtap=癬swichNav”数据流="{{指数}}在{{! tname & # 63;item.name:条目[tname] . name}} & lt;/view>
& lt;/view>
& lt;/scroll-view>
& lt; !——内容列表——比;
& lt; slot>
& lt;/slot>
之前
组件/导航/index.js
//组件的对外属性,是属性名到属性设置的映射表,属性设置中可包含三个字段,类型表示属性类,型值表示属性初始值,观察表示属性值被更改时的响应函数
组件({
属性:{//标题列表
tList: {
类型:数组,
价值:[]
},//当前标签索引
currentTab: {
类型:数字,
值:0,
观察者:函数(newVal oldVal) {
this.setData ({
currentTab: newVal
}）
}
}
},//组件的方法,包括事件响应函数和任意的自定义方法,关于事件响应函数的使用
方法:{//内部方法建议以下划线开的头
_swichNav:函数(e) {//自定义组件触发事件时,需要使用triggerEvent方法,指定事件名,详细的对象和事件选项
这一点。triggerEvent (changeCurrent, {
currentNum: e.currentTarget.dataset.current
}）
}
}
})
组件/导航/index.wxss
.scroll-view-x {
background - color: # fff;
空白:nowrap;}
位置:固定;
z - index: 10;
上图:0
}
.scroll-view-x .scroll-view-item {
显示:inline-block;
保证金:0 35 rpx;
行高:33 px;
光标:指针;
}
碧绿{
边界底部:2 px固体红;
颜色:红色
}
<强>使用自定义组件
使用已注册的自定义组件前,首先要在页面的json文件中进行引用声明。此时需要提供每个自定义组件的标签名和对应的自定义组件文件路径:
页面/订货单/index.json
{
:“navigationBarTitleText订单列表”,
" usingComponents ": {
“slideTab”:“. ./. ./组件/导航/指数”
}
}
这样,在页面的wxml中就可以像使用基础组件一样使用自定义组件。节点名即自定义组件的标签名,节点属性即传递给组件的属性值。
页面/订货单/index.wxml
& lt;视图比;
& lt; slideTab tList=" {{statusType}}”困境:changeCurrent=皊wichNav currentTab”=皗{currentType}}”比;
& lt;偷窃者电流=" {{currentType}}”时间=" 300 " bindchange=癰indchange”比;
& lt; block>
& lt; swiper-item wx:="{{列表}}”在
& lt;视图类=懊挥兄刃颉币?"{{项目。长度& # 63;真:假}}”在
& lt;图像src=" https://www.yisu.com/assets/imgs/no-order.png "类=皀o-order-img祝辞& lt;/image>
& lt;视图类=拔谋尽弊４窃菸薅┑? lt;/view>
& lt;/view>
& lt;滚动视图scroll-y=" true "类=岸┗醯ァ眘croll-with-animation=" true "下辨别阈=?”bindscrolltolower=皊crolltolower”隐藏="{{项目& # 63;误:真}}”在
& lt;视图类=岸┑ァ钡奶炱?为=皗{项}}”天气:关键=癱hildIndex”天气:项=癱hildItem”比;
& lt;视图类=岸┑ト掌凇北?
& lt;视图类=" date-box "祝辞下单时间:{{childItem.dateAdd}} & lt;/view>
& lt;视图类={{(childItem”状态。状态==1 | | childItem.status==4) & # 63;”:“红色”}}在{{item.statusStr}} & lt;/view>
& lt;/view>
& lt;视图类=" goods-info " bindtap=皁rderDetail”数据id=" {{childItem.id}}”在
& lt;视图类=癵oods-des”比;
& lt; view>订单号:{{childItem。orderNumber}} & lt;/view>
& lt;查看天气:如果=" {{childItem。话,,childItem。备注!="}}"祝辞备注:{{item.remark}} & lt;/view>
& lt;/view>
& lt;/view>
& lt;视图比;
& lt;滚动视图类=" goods-img-container " scroll-x=" true "比;
& lt;视图类=癷mg-box”天气:=" {{goodsMap [currentType] [childItem。id]}} child_item“天气:项=比;
& lt;图像src=" https://www.yisu.com/zixun/{{child_item.pic}}”类=癵oods-img祝辞& lt;/image>
& lt;/view>
& lt;/scroll-view>
& lt;/view>
& lt;视图类=皃rice-box”比;
& lt;视图类=白芗邸痹诤霞?円{{childItem.amountReal}} & lt;/view>
& lt;视图类==隐藏“btn cancel-btn {{childItem.status==0 & # 63;假:真}}" bindtap=" cancelOrderTap "数据id=" {{childItem.id}}”在取消订单& lt;/view>
& lt;视图类==隐藏“btn topay-btn {{childItem.status==0 & # 63;fslse:真}}" bindtap=" toPayTap "数据id=" {{childItem。id}} {{childItem.amountReal}}“data-money=祝辞马上付款& lt;/view>
& lt;/view>
& lt;/view>
& lt;/scroll-view>
& lt;/swiper-item>
& lt;/block>
& lt;/swiper>
& lt;/slideTab>
& lt;/view>
