微信小程序_简单页面

Page({
data: {
names: [
'处置列表',
'约诊',
'消息',
'顾客信息'
],
navsText: [
'../appointment/appointment',
'../customer/customer',
'../disposalList/disposalList',
'../message/message',
]
},
//事件处理函数
changeMotto: function(btn) {
//获取button的target下的id参数
var path;

var num = btn.target.id;

switch(num)
{
case '0':
path = '../appointment/appointment'
break;
case '1':
path = '../customer/customer'
break;
case '2':
path = '../disposalList/disposalList'
break;
case '3':
path = '../message/message'
break;
default:
break;
}

wx.navigateTo({

// switch
url: path
})
}
})

<view class="downView">
<image class="topImage" src="/image/图片1.png"></image>
<view class="nameBoard">
<block wx:for="{{names}}" wx:for-index="index" >
<swiper-item>
<button class="nameBoard-btn" bindtap="changeMotto" id="{{index}}">
<image class="nameBoard-image" src="/image/icon_API_HL.png"></image>
<text class="nameBoard-text">{{item}}</text>
</button>
</swiper-item>
</block>
</view>
</view>

.topImage {
width: 100%;
}

.nameBoard {
display: flex;
margin-right: 20rpx;
margin-left: 20rpx;
margin-top: 10rpx;
}

.nameBoard swiper-item{
flex: 1;
margin: 10rpx;
/*边框： 1的宽度 实线 颜色*/
border: 1rpx solid #98bf21;
}

.nameBoard-btn {
line-height: 1;
padding-left: 0;
padding-right: 0;
}

.nameBoard-image{
margin-top: 20rpx;
height: 84rpx;
width: 84rpx;
}

.nameBoard-text{
display: block;
font-size: 26rpx;
margin-top: 20rpx;
margin-bottom: 20rpx;
/*文字居中*/
text-align:center;
/*强制不换行*/
/*white-space: nowrap;*/
}