本文给大家带来的是万科房地产小程序首页样式制作设计教程，制作好以后效果图如下：
一、wxml页面代码如下：
<!--index.wxml-->
<view class="container">
<swiper indicator-dots="true" autoplay="true" interval="3000" duration="800" class="swiper-banner bg-white">
<block wx:for="{{banners}}" wx:key="item.id">
<swiper-item>
<image src="{{item}}" mode="scaleToFill" style="width:100%;height:400rpx;"></image>
</swiper-item>
</block>
</swiper>
<view class="menuWrap bg-white">
<view class="menuWrap-item">
<view class="menuWrap-item-navi" bindtap="getScanning">
<span class="iconfont icon-qrcode"></span>
<text>扫描预订</text>
</view>
</view>
<view class="menuWrap-item">
<navigator class="menuWrap-item-navi" url="../booking/booking?type=seat">
<span class="iconfont icon-zuowei"></span>
<text>预约座位</text>
</navigator>
</view>
<view class="menuWrap-item">
<navigator class="menuWrap-item-navi" url="../booking/booking?type=room">
<span class="iconfont icon-huiyishi"></span>
<text>预约会议室</text>
</navigator>
</view>
</view>
<view class="noticeList bg-white">
<block wx:for="{{notice}}" wx:key="item.id">
<navigator class="noticeList-item" url="../article/article">
<image src="{{item.image}}" style="width:112px;height:68px;"></image>
<view class="noticeList-item-r">
<text class="noticeList-item-title">{{item.title}}</text>
<text class="noticeList-item-desc">{{item.desc}}</text>
</view>
</navigator>
</block>
</view>
</view>
<import src="../../template/template.wxml"/>
<template is="qrcode" />
|
二、wxss样式文件代码如下：
/**index.wxss**/
.swiper-banner{
height: 400rpx;
}
.menuWrap{
padding: 20rpx;
display: -webkit-box;
display: -webkit-flex;
display: flex;
}
.menuWrap-item{
text-align: center;
-webkit-box-flex: 1;
-webkit-flex: 1;
flex:1;
}
.menuWrap-item-navi{
display: inline-block;
width: 150rpx;
padding: 10rpx 0;
color: #b02923;
}
.menuWrap-item-navi span{
font-size: 30px;
}
.menuWrap-item-navi text{
display: block;
margin-top: 8px;
}
.icon-qrcode{
font-weight:bold;
}
|
三、js页面代码如下：
//index.js
//获取应用实例
var app = getApp()
Page({
data: {
banners:["../../images/index-focus-1.png","../../images/index-focus-2.png"],
notice:[
{
"image": "../../images/notice-1.png",
"title": "2016第三季度报告",
"desc": "1.1本公司董事会、监事会及董事、监事、高级管理人员保证本报告所载资料不存在任何虚假记载、误导性陈述或者重大遗漏..."
},{
"image": "../../images/notice-2.png",
"title": "万科首次上榜《财富》世界500强 名列第356位",
"desc": "2016年7月20日，《财富》“世界500强”企业排行榜出炉，万科企业股份有限公司凭借2015年年度1843.18亿元的营收..."
},{
"image": "../../images/notice-3.png",
"title": "2016中国房企百亿军团出炉!恒大(03333)击败万科(02202)登顶榜首",
"desc": "中国指数研究院发布2016年中国房地产销售额百亿企业榜单，全国共有131家房地产企业跻身百亿军团,其中恒大、万科..."
}
]
},
onLoad: function () {
var that = this
/*app.getRequest('https://hseschool.app360.cn/mingpian/wanke/home.json',function(res){
that.setData({
banners: res.data.banners,
notice: res.data.notice
})
})*/
},
getScanning: function () {
app.getScanning()
}
})
|
.jpg)
.jpg)
