微信小程序_简单页面

来源：互联网发布：谣传网络信息法律法规编辑：程序博客网时间：2024/04/29 21:10

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

先看下效果图：

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

实例代码demo：

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

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

0 0