在components组件中新建tab文件夹。(组件可自定义样式)
components/Tab/tab.wxml
<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 style="{{currentTab==(index) ?styleActive:styleOld}}" bindtap="_swichNav" data-current="{{index}}">{{ !tname ? item.name : item[tname].name }}view>
view>
scroll-view>
<slot>
slot>
** components/Tab/tab.js**
// components/Tab/tab.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
})
}
},
styleActive: {//选中激活的样式
type: String,
value: 'color:#603F25;border-bottom: 5rpx solid #603F25;',
},
styleOld: {//默认的样式
type: String,
value: 'color:#BCA796;',
},
},
//组件的方法,包括事件响应函数和任意的自定义方法,关于事件响应函数的使用
methods: {
// 内部方法建议以下划线开头
_swichNav: function (e) {
//自定义组件触发事件时,需要使用 triggerEvent 方法,指定事件名、detail对象和事件选项
this.triggerEvent('changeCurrent', {
currentNum: e.currentTarget.dataset.current
})
}
}
})
tab.css
.scroll-view-x{
white-space: nowrap;
z-index:10;
font-size: 32rpx;
}
.scroll-view-x .scroll-view-item{
display:inline-block;
margin:0 35rpx;
line-height: 33px;
cursor: pointer;
}
.on{
}
在pages文件中引用
html中
<view class="boxBig bgz bgt" style="height: {{screenHeight}}px;">
<view class="wid100 paddL20 paddR20 boxSing">
<slideTab tList="{{statusType}}" bind:changeCurrent="swichNav" currentTab="{{currentType}}">
<swiper current="{{currentType}}" duration="300" bindchange="bindChange" style="height: {{screenHeight-35}}px;margin-top:35px;">
<block>
<swiper-item wx:for="{{listInfo}}" wx:key="index" >
<view class="hetd bgSet marB30 flexz paddB40 paddT40 paddL30 paddR30 boxSing" style="background-image: url('{{imgz1}}');" wx:for="{{item}}" wx:key="childIndex" wx:for-item="childItem">
<image class="img200 boRadius20 marL30" src="{{childItem.img}}" mode="aspectFill">image>
<view class="wid60 marL20 lineHei40 mar">
<view class="fontz28 fontWeightB">{{childItem.title}}view>
<view class="fontz24 color7D644D ellipsis2">{{childItem.desc}}view>
<view class="flexz">
<view class="fontz32 color6A3906 fontWeightB wid60 marT10">¥99view>
<view class="anniusm" bindtap="goDet" data-id="{{item.id}}" bindtap="goDet">详情view>
view>
view>
view>
swiper-item>
block>
swiper>
slideTab>
view>
view>
js文件
data: {
statusType: [
{ name: "全部", page: 0 },
{ name: "待发货", page: 0 },
{ name: "待收货", page: 0 },
{ name: "已完成", page: 0 }
],
currentType: 0,
listInfo: [[{ id: 1, img: '/images/img.png', title: '蓝鳍:Blue Fin 美式海鲜纽约海港西餐厅', desc: '内容简介内容简介内容简介内容简介内容简介内容简介' }, { id: 1, img: '/images/img.png', title: '蓝鳍:Blue Fin 美式海鲜纽约海港西餐厅', desc: '内容简介内容简介内容简介内容简介内容简介内容简介' }],
[{ id: 1, img: '/images/img.png', title: '蓝鳍:Blue Fin 美式海鲜纽约海港西餐厅', desc: '内容简介内容简介内容简介内容简介内容简介内容简介' }, { id: 1, img: '/images/img.png', title: '蓝鳍:Blue Fin 美式海鲜纽约海港西餐厅', desc: '内容简介内容简介内容简介内容简介内容简介内容简介' }], [], [], []],
},
// 点击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();
},