微信小程序_简单页面

这篇文章主要是用微信小程序的一些基本组件，做了一个简单的页面来和小伙伴们一起分享，如果有问题欢迎留言。

先看下效果图：

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代码部分：

	
	
	
		
			
				
				{{item}}
			
		
	
	

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

实例代码demo：

https://pan.baidu.com/s/1hrPJ4A4

感谢观看，学以致用更感谢~