這篇文章主要是用微信小程式的一些基本元件，做了一個簡單的頁面來和小夥伴們一起分享，如果有問題歡迎留言。

先看下效果圖：

js程式碼部分:

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
    })
  }
})
 

wxml程式碼部分：

<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>
 

wxss程式碼部分:

.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;*/
}
 

感謝觀看，學以致用更感謝~