微信小程序组件 分页菜单点击请求

//JS

data: {

navNum:0,

navList: [

{

id: 1,

name: '已预约'

},

{

id: 2,

name: '已消费'

},

{

id: 3,

name: '已取消'

},

],

shopList0: [

{

id: 1,

image: '/imgs/news/class_1.png',

coach: '张胜男',

time: '2017-10-10 09:00-10:00',

age: '11,12',

adress: '浙江省，杭州市，余杭区，乔司镇，保亿风景晨缘G1，128楼，208',

num: 10,

selected: true,

},

{

id: 1,

image: '/imgs/news/class_1.png',

coach: '张胜男',

time: 'er年',

age: '11,12',

adress: '杭州',

num: 20,

selected: false,

}

],

shopList1: [

{

id: 1,

image: '/imgs/news/class_1.png',

coach: '张胜男',

time: 'er年',

age: '11,12',

adress: '杭州',

num: 20,

selected: false,

}

],

shopList2: [

{

id: 1,

image: '/imgs/news/class_1.png',

coach: '张胜男',

time: '2017-10-10 09:00-10:00',

age: '11,12',

adress: '浙江省，杭州市，余杭区，乔司镇，保亿风景晨缘G1，128楼，208',

num: 10,

selected: true,

},

{

id: 1,

image: '/imgs/news/class_1.png',

coach: '张胜男',

time: 'er年',

age: '11,12',

adress: '杭州',

num: 20,

selected: false,

}

],

shopListN: [],

 

},

// 分页菜单函数

selectNav: function (e) {

var that=this;

// console.log(e.currentTarget.dataset.id)

let id = e.currentTarget.dataset.id;

let index = e.currentTarget.dataset.index;

this.setData({

navNum: index

})

switch (index) {

case 1:

(function(){

that.setData({

shopListN: that.data.shopList0

})

})()

break;

case 2:

(function () {

that.setData({

shopListN: that.data.shopList1

})

})()

break;

default:

(function () {

that.setData({

shopListN: that.data.shopList2

})

})()

}

 

},

 

 

//css

 

.aside{

border-bottom: 1px solid #f7f7f7;

}

.type-nav{

width: 33.33%;

/* text-align: center; */

height: 88rpx;

">#fff;

}

.type-nav>view text{

color: #333;

margin-bottom: 20rpx;

margin-top: 10rpx;

font-size: 34rpx;

}

.type-nav>view view{

width: 48rpx;

border-bottom: 4rpx solid transparent;

}

.aside .type-nav>view .selected{

color: #19ad17;

border-color: #19ad17;

}

.list{

width: 100%;

}

.news-box{

width: 100%;

">white;

padding: 20rpx 24rpx;

border-bottom: 1rpx solid #f7f7f7;

box-sizing: border-box;

}

.new-left{

float: left;

width: 136rpx;

height: 136rpx;

}

.news-img{

width: 136rpx;

height: 136rpx;

margin: 0 auto;

}

.news-img image{

width: 100%;

height: 100%;

border-radius:50%;

}

.news-title {

flex: 1;

padding-left: 20rpx;

box-sizing: border-box;

}

.news-title>view{

width: 100%;

overflow: hidden;

}

.new-titleright{

margin-left: 30rpx;

box-sizing: border-box;

}

.new-titleright button{

margin-top: 10px;

padding: 10rpx 20rpx;

box-sizing: border-box;

font-size: 30rpx;

">#19ad17;

}

.order-order{

margin-top: 20rpx;

text-align: center;

}

.order-order {

font-size: 26rpx;

color:#19ad17;

}

.order-order>text{

font-size: 32rpx;

}

.news-name{

font-size: 32rpx;

}

.news-name2{

width: 100%;

font-size: 24rpx;

line-height: 36rpx;

}

 

 

 

//wxml

<view class="appoint-container">

<!-- menue -->

<view class="aside flex">

<block wx:key="navList" wx:for="{{navList}}">

<view class="type-nav flexca" bindtap="selectNav" data-index="{{index}}">

<view class='flexda'>

<text class="{{navNum == index ? 'selected' : ''}}">{{item.name}}</text>

<view class="{{navNum == index ? 'selected' : ''}}"></view>

</view>

</view>

</block>

</view>

<!-- content -->

<view class="list">

<block wx:key="ishesList" wx:for="{{shopListN}}">

<view class="news-box flexa" data-goods="{{item.id}}">

<view class='new-left'>

<view class="news-img" bindtap='newsDetail' data-id="{{item.id}}">

<image src="{{item.image}}"></image>

</view>

</view>

<view class="news-title">

<view class="news-name">

教练：

<text>{{item.coach}}</text>

</view>

<view class="news-name2">

年龄限制：

<text>{{item.age}}</text>

</view>

<view class="news-name2">

时间：

<text>{{item.time}}</text>

</view>

<view class="news-name2">

地点：

<text>{{item.adress}}</text>

</view>

</view>

<view wx:if="{{navNum==0?true:''}}" class="new-titleright">

<button class='button' data-id="{{item.time}}" data-index='{{index}}' bindtap='orderDelete'>取消预约</button>

<view class="order-order">

已预约

<text>{{item.num}}</text>人

</view>

</view>

<view wx:if="{{navNum==1?true:''}}" class="new-titleright">

<view class="order-order">

<text>已消费</text>

</view>

</view>

<view wx:if="{{navNum==2?true:''}}" class="new-titleright">

<view class="order-order">

<text>已取消</text>

</view>

</view>

</view>

</block>

</view>

</view>