本文给大家带来的是微信小程序移动互联网开发公司联系我们页面制作设计教程，制作好以后效果图如下：
一、wxml页面代码如下：
<import src="../../common/tpl/banner-swiper.wxml"/>
<view>
<template is="bannerSwiper" data="{{...bannerSwiperConfig}}"/>
<view class="contact-info">
<view class="contact-info-title"><text>联系我们</text></view>
<view class="contact-info-list">
<view class="contact-info-item" wx:for="{{contactInfo}}">
<label style="background-image:url('{{item.icon}}')">{{item.title}}：</label>
<text class="contact-info-content" selectable="true">{{item.content}}</text>
</view>
</view>
</view>
<view class="footer">
<navigator class="dz-btn" url="../dingzhi/dingzhi">立即定制</navigator>
</view>
</view>
|
二、wxss样式文件代码如下：
.footer {
margin-top: 72rpx;
padding: 0 84rpx;
}
.contact-info {
margin-top: 20rpx;
padding: 32rpx;
background: white;
}
.contact-info-title {
font-size: 42rpx;
color: #61a1ff;
font-weight: bold;
margin-bottom: 12rpx;
}
.contact-info-list {
margin: 0 -15rpx;
}
.contact-info-item {
font-size: 32rpx;
line-height: 58rpx;
color: #666666;
}
.contact-info-item label {
display: inline-block;
padding-left: 52rpx;
background: url("") no-repeat left center/contain;
}
.contact-info-content {
display: inline-block;
vertical-align: top;
}
|
三、js页面代码如下：
Page({
data: {
bannerSwiperConfig: getApp().globalData.bannerSwiperConfig,
contactInfo: [
{
icon:"http://www.gzyueyun.com/m/yueyun-mini-app/assets/img/contact_icon_1.png",
title:"地址",
content:"广州市越秀区先烈中路穗丰大厦B座202"
},
{
icon:"http://www.gzyueyun.com/m/yueyun-mini-app/assets/img/contact_icon_2.png",
title:"免费咨询电话",
content:"020-37579981"
},
{
icon:"http://www.gzyueyun.com/m/yueyun-mini-app/assets/img/contact_icon_3.png",
title:"商务合作",
content:"dengyunjia@gzyueyun.com"
},
{
icon:"http://www.gzyueyun.com/m/yueyun-mini-app/assets/img/contact_icon_4.png",
title:"工作时间",
content:"周一~~周五 早上9:00~~下午18:00"
},
{
icon:"http://www.gzyueyun.com/m/yueyun-mini-app/assets/img/contact_icon_5.png",
title:"地铁",
content:"地铁5号线区庄站E出口东山广场方向"
}
]
},
onLoad: function () {
getApp().getBannerList(this);
}
});
|
.jpg)
.jpg)
